如何使用GSAP时间轴实现元素上下移动无限循环动画

问题背景 #

• 操作对象：class为cookie的SVG饼干元素
• 目标动画效果（无限次重复）：
  1. 从原点（y=0）移动到y=-20位置
  2. 返回y=0位置
  3. 移动到y=20位置
  4. 返回y=0位置
• 现有实现代码仅能执行单次流程，无法循环：

tl.fromTo(".cookie", { y: 0 }, { y: 20 });
tl.fromTo(".cookie", { y: 20 }, { y: -20 });
tl.fromTo(".cookie", { y: -20 }, { y: 0 });

修复方法 #

GSAP Timeline实例原生支持循环配置，不需要额外手写循环逻辑，两步调整即可满足需求：

1. 创建Timeline实例时传入repeat: -1配置项，该配置是GSAP约定的无限循环标识
2. 调整补间顺序匹配目标动画路径，后续补间可以直接用to方法承接上一段的结束状态，不需要重复写起始值

修正后的完整代码：

// 初始化时间轴时开启无限循环
const tl = gsap.timeline({ repeat: -1 });

// 按需求顺序排列动画段
tl.fromTo(".cookie", { y: 0 }, { y: -20 })
  .to(".cookie", { y: 0 })
  .to(".cookie", { y: 20 })
  .to(".cookie", { y: 0 });

可选优化配置 #

• 单段动画时长：给每个补间加duration参数控制运动速度，单位为秒
• 缓动效果：通过ease参数设置动画缓动曲线，让运动更自然
• 循环间隔：在timeline配置中加repeatDelay参数，设置每次完整循环结束后的停顿时长
  示例：

// 每次循环结束后停顿0.2秒
const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.2 });
// 每段动画时长0.3秒，搭配缓动
tl.fromTo(".cookie", { y: 0 }, { y: -20, duration: 0.3, ease: "power1.out" })
  .to(".cookie", { y: 0, duration: 0.3, ease: "power1.inOut" })
  .to(".cookie", { y: 20, duration: 0.3, ease: "power1.inOut" })
  .to(".cookie", { y: 0, duration: 0.3, ease: "power1.in" });

内容的提问来源于stack exchange，提问作者so_hell