javascript - TweenJs - 单击时旋转矩形仅运行一次

Question

我正在尝试在名为 TweenJs(CreateJs 套件的一部分)的 JavaScript 库中的“单击”事件上创建简单的动画，但似乎动画仅在我第一次单击矩形时更新显示。动画第一次结束后，每次单击时，代码似乎都在运行，但显示保持静止(或不更新)。您可以在控制台中看到它记录了动画的开始和结束。

有人可以帮我解释一下我的代码有什么问题吗？总的来说，这是使用 stage.update() 的正确方法吗？

这是我的代码:

https://codepen.io/milan_d/pen/rNaJEKY?editors=1111

非常感谢!

Answer 1

问题是，一旦您旋转它，它就已经旋转到您在后续点击中指定的 Angular 。

一个简单的解决方案是在单击它时添加一个零持续时间的 to() 调用来重置它。

createjs.Tween.get(square)
    .to({rotation:0}) // This one has no duration, so it is immediate
    .to({rotation:360},3000)
    .call(squareRotationComplete);

另一个选项是始终根据初始补间旋转它

createjs.Tween.get(square)
    .to({rotation:square.rotation + 360},3000)
    .call(squareRotationComplete);

最后，您可以使用 RelativePlugin 。首先安装它，然后在 to() 调用中使用“+360”。

createjs.RelativePlugin.install(); // Run once
createjs.Tween.get(square)
    .to({rotation:"+360"},3000) // Note the value.
    .call(squareRotationComplete);

干杯!