在 TweenJS 中循环后暂停

Question

我希望你们中的一些人使用过 tween.js（create.js 库套件的一部分）。

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

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

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

谢谢！

Answer 1

当然，让我们逐步执行一些代码：

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 的补间开始（从 1 开始）来删除多余的 0/360 补间

这个改变导致了这个（注意：我也改变了轻松，所以我可以更好地看到它）：

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

当然，接下来要解决的问题是如何让齿轮旋转但又不会失去正确的光照/阴影方向。我会把它留给你。

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