gsap-时间轴控制

 // 创建主时间轴
        const mainTimeline = gsap.timeline({
            paused: true,         // 创建时暂停状态
            repeat: -1,           // 无限重复
            onUpdate: updateProgress // 每次更新时调用updateProgress函数
        });

        // 初始化元素位置
        gsap.set('.box', { 
            autoAlpha: 0         // 设置初始透明度和可见性为0
        });

        // 构建复杂的动画序列
        mainTimeline
            // 第一个盒子的动画
            .to('.box1', {
                duration: 1,          // 动画持续时间1秒
                autoAlpha: 1,        // 透明度和可见性变为1
                x: 200,              // X轴移动200像素
                y: 100,              // Y轴移动100像素
                rotation: 360,       // 旋转360度
                ease: "back.out(1.7)" // 回弹缓动效果，1.7是回弹强度
            })
            // 第二个盒子的动画
            .to('.box2', {
                duration: 1,          // 动画持续时间1秒
                autoAlpha: 1,        // 透明度和可见性变为1
                x: 400,              // X轴移动400像素
                y: 200,              // Y轴移动200像素
                rotation: -360,      // 逆时针旋转360度
                ease: "elastic.out(1, 0.3)" // 弹性缓动效果，1是弹性强度，0.3是弹性周期
            }, "-=0.5")  // 在前一个动画完成前0.5秒开始
            // 第三个盒子的动画
            .to('.box3', {
                duration: 1,          // 动画持续时间1秒
                autoAlpha: 1,        // 透明度和可见性变为1
                x: 300,              // X轴移动300像素
                y: 300,              // Y轴移动300像素
                scale: 2,            // 放大到2倍
                ease: "bounce.out"   // 弹跳缓动效果
            }, "-=0.5")
            // 所有盒子同时运动
            .to('.box', {
                duration: 2,          // 动画持续时间2秒
                x: "+=100",          // X轴相对当前位置再移动100像素
                y: "-=100",          // Y轴相对当前位置向上移动100像素
                rotation: "+=180",    // 相对当前角度再旋转180度
                backgroundColor: "#e74c3c", // 改变背景色为红色
                stagger: 0.2,        // 每个元素之间延迟0.2秒开始
                ease: "power1.inOut" // 渐入渐出缓动效果
            })
            // 盒子消失动画
            .to('.box', {
                duration: 1,          // 动画持续时间1秒
                autoAlpha: 0,        // 透明度和可见性变为0
                scale: 0,            // 缩小到0
                stagger: 0.2,        // 每个元素之间延迟0.2秒开始
                ease: "back.in(1.7)" // 回弹缓动效果，1.7是回弹强度
            });

        // 更新进度条
        function updateProgress() {
            const progress = this.progress() * 100;
            document.querySelector('.progress').style.width = `${progress}%`;
        }

        // 控制函数
        function playAnimation() {
            mainTimeline.play();
        }

        function pauseAnimation() {
            mainTimeline.pause();
        }

        function reverseAnimation() {
            mainTimeline.reverse();
        }

        function restartAnimation() {
            mainTimeline.restart();
        }

        function slowAnimation() {
            mainTimeline.timeScale(0.5);
        }

        function normalAnimation() {
            mainTimeline.timeScale(1);
        }

        function fastAnimation() {
            mainTimeline.timeScale(2);
        }

        // 默认开始播放
        playAnimation();