GSAP，从原点上下移动元素

Question

我有一个" cookie ";带有"cookie"类的SVG，我想让cookie从原点开始移动到-20然后移动到0它们移动到20然后移动到0，我想让它无限长时间地这样做，显然我使用GSAP使用时间轴来做到这一点，但不知道如何做到

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

这个代码做的工作，但只有一个时间，但我想做它无限的时间，所以请帮助!!

Answer 1

要无限重复动画，将repeat: -1添加到时间轴中。

let tl = gsap.timeline({ repeat: -1 });
tl.to(".cookie", { y: -20, ease: "none" })
.to(".cookie", { y: 0, ease: "none" })
.to(".cookie", { y: 20, ease: "none" })
.to(".cookie", { y: 0, ease: "none" });

Codepen联系

---

,

• 简单地链接.to得到相同的结果。所以你不必每次都使用.fromTo。
• 添加ease: "none"使动画对我来说不那么颠簸。