GSAP动画封装实现方案

hl-effect- 固定模式 方向：left right top bottom 延迟时间：单位ms，比如 0 100 200 300，0代表和上一个动画同步，不加默认200ms

比如：hl-effect-left-100

所有的x y都是相对于原来的位置

• paused 时间线开始不自动执行
• ease 动画规则 "power4.in", // 先慢后快 "power2.inOut", // 先快后慢
• opacity 不透明度
• duration 所需时间
• , "<0.5" 后缀添加意义为上一动画后0.5秒运行
• , "<" 后缀添加意义为与上一动画同时运行 */ 切入切出为动画类型，封装了两个动画类 panelEffectOut为面板动画 切入 / 切出 ，需要传入切入切出方向 elementsEffect为元素动画 切入 / 切出随面板，方向和延迟根据class标签读取

切入具体逻辑为： 1.面板切入动画 2.随面板切入动画后0.2秒后同时运行元素切入动画，切入元素为指定id的面板下遍历条件符合[class*="hl-effect-"]的元素并生成list集合传入元素切入封装类 3.根据时间线排序实现层次感

import gsap from 'gsap';

/*
所有的x y都是相对于原来的位置
- paused 时间线开始不自动执行
- ease 动画规则  "power4.in", // 先慢后快  "power2.inOut", // 先快后慢
- opacity 不透明度
- duration 所需时间
- , "<0.5" 后缀添加意义为上一动画后0.5秒运行
- , "<" 后缀添加意义为与上一动画同时运行
*/

//面板动画 - 切出
gsap.registerEffect({
    name: "panelEffectOut",
    effect: (targets, config) => {

        // 定义一个时间线来串联两个动画
        let tl = gsap.timeline();
        if (config.mode == "in") {
            
            if (config.direction == "left" || config.direction == "right") {

                //默认左方向
                let x1 = 100;
                let x2 = 0
                if (config.direction == "right") {
                    //右方向
                    x1 = -100;
                    x2 = 0
                }

                // 第一步动画
                tl.to(targets, {
                    x: x1,
                    opacity: 0.5,
                    duration: 0.8
                });

                // 第二步动画
                tl.to(targets, {
                    x: x2,
                    opacity: 1,
                    duration: 1
                });

            } else {

                //默认上方向
                let y1 = 100;
                let y2 = 0
                if (config.direction == "bottom") {
                    //右方向
                    y1 = -100;
                    y2 = 0
                }

                // 第一步动画
                tl.to(targets, {
                    y: y1,
                    opacity: 0.5,
                    duration: 0.8
                });

                // 第二步动画
                tl.to(targets, {
                    y: y2,
                    opacity: 1,
                    duration: 1
                });

            }
        } else {

            if (config.direction == "left" || config.direction == "right") {

                //默认左方向
                let x1 = 100;
                let x2 = -700
                if (config.direction == "right") {
                    //右方向
                    x1 = -100;
                    x2 = 700
                }

                // 第一步动画
                tl.to(targets, {
                    x: x1,
                    opacity: 0.5,
                    duration: 0.4
                });

                // 第二步动画
                tl.to(targets, {
                    x: x2,
                    opacity: 0,
                    duration: 1
                });

            } else {

                //默认上方向
                let y1 = 100;
                let y2 = -700
                if (config.direction == "bottom") {
                    //右方向
                    y1 = -100;
                    y2 = 700
                }

                // 第一步动画
                tl.to(targets, {
                    y: y1,
                    opacity: 0.5,
                    duration: 0.4
                });

                // 第二步动画
                tl.to(targets, {
                    y: y2,
                    opacity: 0,
                    duration: 1
                });

            }
        }

        return tl;


    },
    extendTimeline: true // 允许在 GSAP 时间线上直接调用这个效果
});

//元素动画 -元素切入
gsap.registerEffect({
    name: "elementsEffect",
    effect: (targets, config) => {
        // console.log("🚀元素切入 ~ targets, config:", targets, config)
        

        // 创建时间线以添加延迟
        let tl = gsap.timeline();

        // 使用 .forEach 遍历每个目标元素
        targets.forEach(target => {
            let delay = 0;
            let direction = "";

            // 从类名中提取延迟时间
            const classList = target.classList;
            classList.forEach(className => {
                const match = className.match(/hl-effect-(left|right|top|bottom)-(\d+)/);
                if (match != null) {
                    direction = match[1]
                    delay = parseInt(match[2], 10) / 1000; // 将毫秒转换为秒
                }
            });

            // 根据方向设置初始位置
            if (direction === "left") {
                gsap.set(target, { x: -300, opacity: 0 });
            } else if (direction === "right") {
                gsap.set(target, { x: 300, opacity: 0 });
            } else if (direction === "bottom") {
                gsap.set(target, { y: 300, opacity: 0 });
            } else if (direction === "top") {
                gsap.set(target, { y: -300, opacity: 0 });
            }

            // 添加动画到时间线
            if (direction === "left" || direction === "right") {

                tl.to(target, {
                    x: 0,
                    opacity: 1,
                    duration: 0.6,
                }, "<" + delay)

            } else if (direction === "top" || direction === "bottom") {

                tl.to(target, {
                    y: 0,
                    opacity: 1,
                    duration: 0.6,
                }, "<" + delay);
            }
        });

        return tl;

    },
    extendTimeline: true // 允许在 GSAP 时间线上直接调用这个效果
});



//隐藏传入元素
const hiddenelement = (element, direction = "x", px = 300) => {

    if (direction == "x") {
        gsap.set(element, {
            x: px,
            opacity: 0,
        });
    }

    if (direction == "y") {
        gsap.set(element, {
            y: px,
            opacity: 0,
        });
    }

}

//切出动画
export const cutOut = () => {

    // 创建一个时间线
    const tl1 = gsap.timeline({
        paused: true,
        ease: "power4.in", // 先慢后快
    });
    // 创建一个时间线
    const tl2 = gsap.timeline({
        paused: true,
        ease: "power4.in", // 先慢后快
    });

    // 创建一个时间线 面板3
    const tl3 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 面板4
    const tl4 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 图例
    const tl5 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 顶部
    const tl6 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });


    tl1.panelEffectOut("#main-box1", { direction: "left", mode: "out" })
    tl2.panelEffectOut("#main-box2", { direction: "left", mode: "out" })
    tl3.panelEffectOut("#main-box3", { direction: "right", mode: "out" })
    tl4.panelEffectOut("#main-box4", { direction: "right", mode: "out" })
    tl5.panelEffectOut("#main-box5", { direction: "left", mode: "out" })

    var el1 = '.header-left';
    var el2 = '.header-right';
    var el3 = '.header-box';
    var el4 = '.masklayer-main';
    tl6.to(el4, {
        x: 0,
        opacity: 0,
        duration: 0.4
    }).to(el1, {
        x: 100,
        opacity: 0.5,
        duration: 0.4
    }, "<").to(el2, {
        x: -100,
        opacity: 0.5,
        duration: 0.4
    }, "<").to(el1, {
        x: -300,
        opacity: 0,
        duration: 0.4
    }, "<0.4").to(el2, {
        x: 300,
        opacity: 0,
        duration: 0.4
    }, "<").to(el3, {
        y: -300,
        opacity: 0,
        duration: 0.6
    }, "<0.4");

    tl1.play();
    tl4.play();
    tl6.play();
    gsap.delayedCall(0.4, () => {
        tl2.play()
        tl3.play()
    }
    );
    gsap.delayedCall(0.8, () => {
        tl5.play()
    }
    );

}

//切入动画
export const cutIn = () => {

    // 创建一个时间线 面板1
    const tl1 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });
    // 创建一个时间线 面板2
    const tl2 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 面板3
    const tl3 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 面板4
    const tl4 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 图例
    const tl5 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });

    // 创建一个时间线 顶部
    const tl6 = gsap.timeline({
        paused: true,
        ease: "power2.inOut", // 先快后慢
    });


    tl1.panelEffectOut("#main-box1", { direction: "left", mode: "in" })
    const elemetlist1 = document.getElementById('main-box1').querySelectorAll('[class*="hl-effect-"]');
    tl1.elementsEffect(elemetlist1, {}, "<0.2")

    tl2.panelEffectOut("#main-box2", { direction: "left", mode: "in" })
    const elemetlist2 = document.getElementById('main-box2').querySelectorAll('[class*="hl-effect-"]');
    tl2.elementsEffect(elemetlist2, {}, "<0.2")

    tl3.panelEffectOut("#main-box3", { direction: "right", mode: "in" })
    const elemetlist3 = document.getElementById('main-box3').querySelectorAll('[class*="hl-effect-"]');
    tl3.elementsEffect(elemetlist3, {}, "<0.2")

    tl4.panelEffectOut("#main-box4", { direction: "right", mode: "in" })
    const elemetlist4 = document.getElementById('main-box4').querySelectorAll('[class*="hl-effect-"]');
    tl4.elementsEffect(elemetlist4, {}, "<0.2")
    
    tl5.panelEffectOut("#main-box5", { direction: "left", mode: "in" })

    var el1 = '.header-left';
    var el2 = '.header-right';
    var el3 = '.header-box';
    var el4 = '.masklayer-main';
    tl6.to(el4, {
        x: 0,
        opacity: 1,
        duration: 0.4
    }).to(el3, {
        y: -300,
        opacity: 0,
        duration: 0.2
    }, "<").to(el3, {
        y: 0,
        opacity: 1,
        duration: 0.6
    }, "<0.2").to(el1, {
        x: 100,
        opacity: 0.5,
        duration: 0.6
    }, "<0.6").to(el2, {
        x: -100,
        opacity: 0.5,
        duration: 0.6
    }, "<").to(el1, {
        x: 0,
        opacity: 1,
        duration: 0.6
    }, "<0.6").to(el2, {
        x: 0,
        opacity: 1,
        duration: 0.6
    }, "<")

    tl1.play();
    tl4.play();
    tl6.play();
    gsap.delayedCall(0.5, () => {
        tl2.play()
        tl3.play()
    }
    );

    gsap.delayedCall(1, () => {
        tl5.play()
    }
    );

}

export const hideBox = () => {
    hiddenelement("#main-box1", 'x', -300)
    hiddenelement("#main-box2", 'x', -300)
    hiddenelement("#main-box3", 'x', 300)
    hiddenelement("#main-box4", 'x', 300)
    hiddenelement(".masklayer-main", 'x', 0)
}