gsap-Stagger

114 阅读1分钟


   // 从中心向外扩散的动画
        function playFromCenter() {
            gsap.fromTo('.box', 
                {
                    scale: 0,        // 初始缩放比例为0(完全缩小)
                    opacity: 0       // 初始透明度为0(完全透明)
                },
                {
                    scale: 1,        // 最终缩放比例为1(原始大小)
                    opacity: 1,      // 最终透明度为1(完全不透明)
                    duration: 0.5,   // 动画持续时间0.5秒
                    stagger: {
                        amount: 1.5,    // 所有元素完成动画的总时间为1.5秒
                        from: "center", // 动画从中心开始向外扩散
                        grid: [5,5]     // 将元素排列成5x5的网格
                    }
                }
            );
        }

        // 从左到右的动画
        function playFromLeft() {
            gsap.fromTo('.box',
                {
                    x: -100,         // 初始位置在左侧-100像素处
                    opacity: 0       // 初始透明度为0(完全透明)
                },
                {
                    x: 0,            // 最终位置回到原点
                    opacity: 1,      // 最终透明度为1(完全不透明)
                    duration: 0.5,   // 动画持续时间0.5秒
                    stagger: {
                        each: 0.1,      // 每个元素之间间隔0.1秒开始动画
                        from: "start",  // 从第一个元素开始
                        grid: "auto"    // 自动计算网格布局
                    }
                }
            );
        }

        // 随机顺序动画
        function playRandom() {
            gsap.fromTo('.box',
                {
                    rotation: 180,   // 初始旋转180度
                    opacity: 0       // 初始透明度为0(完全透明)
                },
                {
                    rotation: 0,     // 最终旋转回到0度
                    opacity: 1,      // 最终透明度为1(完全不透明)
                    duration: 0.7,   // 动画持续时间0.7秒
                    stagger: {
                        amount: 1,      // 所有元素完成动画的总时间为1秒
                        from: "random"  // 随机顺序播放动画
                    },
                    ease: "back.out"  // 缓动效果:略微回弹
                }
            );
        }

        // 页面加载时播放一次从中心扩散的动画
        playFromCenter();