使最后一个补间无限 GSAP

在 GSAP (GreenSock Animation Platform) 中，补间动画 (tween animation) 是指在指定时间段内，对一个元素的某些属性进行平滑的变化。在多个补间动画设置完成后，可以将它们按照一定的顺序连接起来播放。

当最后一个补间动画执行完毕后，元素会停留在最终状态，如果希望最后一个补间动画执行完毕之后继续循环执行，可以使用 repeat 参数或者 repeatDelay 参数设置循环播放的属性值。

repeat

repeat 的作用是重复播放补间动画。

// 创建一个补间动画对象，将元素的 x 属性从 0 缓慢过渡到 500，用时 2 秒
const tween = gsap.to(".my-element", { duration: 2, x: 500 });

tween.repeat(-1); // 重复播放无限次

• repeat(-1) 表示重复播放无限次，也可以指定播放的次数。

repeat 的其他用法

const tween = gsap.to(".my-element", { duration: 2, x: 500 });
tween.repeat(2); // 重复播放 2 次

const tween = gsap.to(".my-element", { duration: 2, x: 500 });
tween.yoyo(true); // 循环执行时反转播放顺序

repeatDelay

repeatDelay 的作用是在补间动画重复播放时，添加一定的延迟时间。

const tween = gsap.to(".my-element", { duration: 2, x: 500 });
tween.repeat(-1).repeatDelay(1); // 每次重复播放时延迟 1 秒

• repeatDelay(1) 表示每次重复播放时增加 1 秒的延迟时间，可以根据需求设置延迟时间的属性值。

repeatDelay 的其他用法

const tween = gsap.to(".my-element", { duration: 2, x: 500 });
tween.repeat(2).repeatDelay(1).yoyo(true);

• repeat(2) 表示重复播放 2 次
• repeatDelay(1) 表示每次重复播放时增加 1 秒的延迟时间
• yoyo(true) 表示循环执行时反转播放顺序

总结

使用 repeat 和 repeatDelay 参数可以使最后一个补间动画无限循环播放。其中，repeat 表示重复播放的次数，repeatDelay 表示每次重复播放时的延迟时间。