TweenJs

Question

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

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

这是我的代码：

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

非常感谢！

Answer 1

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

一个简单的解决方案是添加一个零持续时间的 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);

干杯！

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

TweenJs - rotate rectangle on click runs only once

javascript

createjs