在补间JS中循环后暂停

Pause after loop in TweenJS

本文关键字：循环 暂停 JS      更新时间：2023-09-26

我希望你们中的一些人使用过补间.js（创建.js库套件的一部分）。

我

有一个JS小提琴向您展示我的问题：http://jsfiddle.net/qyp8Y/1/

我看到每个 8 步循环后都有一个暂停，这不应该存在。

有人可以看看它并告诉我我做错了什么吗？

谢谢！

当然，让我们逐步完成一些代码：

for (i = 0; i <= 8; i++) {
    t.to({
        rotation: 45 * i
    }, 1000, Ease.elasticOut).wait(200);
}

以下是您在该循环中创建的值：

i : rotation 
0 : 0
1 : 45
2 : 90
3 : 135
4 : 180
5 : 225
6 : 270
7 : 315
8 : 360

请注意，就您的目的而言，0 和 360 是相同的值。这意味着当循环从头开始时，它会从 360 到 0（或无处）补间整整一秒。

您的对象从旋转 0 开始，您无法摆脱补间到 360。但是，您可以通过从补间开始到 45（从 i 从 1 开始）将多余的补间删除到 0/360

该更改会导致这种情况（注意：我还更改了易用性，以便更好地看到它）：

for (i = 1; i <= 8; i++) {
    t.to({
        rotation: 45 * i
    }, 1000, Ease.quadInOut).wait(200);
}

当然，下一个要解决的问题是如何使齿轮旋转，但又不会像现在这样丢失正确的照明/阴影方向。我就交给你了。

更新：我通过您提交的 github 问题发现了这个。

相关文章：