gsap-基础动画

76 阅读1分钟


 // 获取元素
        const box = document.querySelector('.box');

        // 创建动画序列
        gsap.to(box, {
            duration: 2,           // 动画持续时间2秒
            x: 200,               // X轴向右移动200像素
            y: 50,                // Y轴向下移动50像素
            rotation: 360,        // 顺时针旋转360度
            scale: 1.5,           // 放大到原始大小的1.5倍
            backgroundColor: '#e74c3c',  // 背景色变为红色
            ease: "elastic.out(1, 0.3)", // 弹性缓动效果,1是弹性强度,0.3是弹性周期
            repeat: -1,           // -1表示无限重复动画
            yoyo: true           // 动画会在正向和反向之间交替播放
        });