javascript - 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 问题发现了这一点。