无法让GSAP返回初始状态

Question

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

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

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

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

我也尝试使用重复的TimeLineMax，但只是在第一次单击Go按钮后重复第一个动画序列。

Answer 1

我不太确定你最终要做什么（这可能会极大地影响我建议建立这种效果的方式），但这里有一个叉子，我相信它会提供你要求的结果：

你的代码在你的动画甚至有机会运行之前就会跳回到开头。此外，它重新使用相同的时间线并不断添加到它不是非常有效。

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

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

有很多其他方法可以做到这一点，但我不想压倒你:)

您可以在https://greensock.com/forums/的专门GSAP论坛上提出更好的运气

快乐的补间！