无法让 GSAP 达到 return 的初始状态

Question

...我在网上搜索了答案。我在这个 jsfiddle 中尽可能多地归结了这个问题： https://jsfiddle.net/tko8rk5j/14/

有2个按钮，你点击Go然后Boost。在 Boost 动画结束后，我试图让整个 svg 回到它的初始位置，这样你就可以一次又一次地播放相同的序列。

我尝试了其他帖子中建议的各种解决方案：

// tl.pause(0);
// tl.restart();
// tl.remove();

我也尝试过使用重复 TimeLineMax，但它只会在第一次单击“开始”按钮后重复第一个动画序列。

Answer 1

我不太确定您最终要做什么（这可能会极大地影响我建议构建此效果的方式），但我相信这里有一个分支可以提供您所要求的结果：

你的代码在你的动画根本没有机会运行之前就跳回了开头。另外，它是 re-using 相同的时间线并不断添加，这不是很有效。

要让它回到开头并在完成后立即停止，只需使用 onComplete 回调，例如：

tl.eventCallback("onComplete", function() {
   tl.pause(0);
});

还有很多其他方法可以做到这一点，但我不想让你不知所措:)

的专用 GSAP 论坛上提问可能会更幸运

补间快乐！

Can't get GSAP to return to initial state