1

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

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

这是我的代码：

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

非常感谢你！

4

1 回答 1

0

问题是一旦你旋转它，它已经旋转到你在随后的点击中指定的角度。

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);

干杯!

于 2020-01-08T21:59:04.870 回答