Твин Js - вращение прямоугольника при клике выполняется только один раз

Question

Я пытаюсь создать простую анимацию по событию "click" в библиотеке JavaScript с именем Tween Js (часть пакета Create Js suite), но кажется, что анимация обновляет отображение только в первый раз, когда я нажимаю на прямоугольнике. После того, как анимация завершена в первый раз, при каждом следующем щелчке кажется, что код работает, но дисплей останавливается (или не обновляется). В консоли видно, что в нем регистрируются начало и конец анимации.

Может кто-нибудь помочь мне и объяснить, в чем проблема с моим кодом, а также, в целом, является ли это правильным подходом для использования 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 . Сначала установите его, а затем просто используйте «+360» в своем вызове to().

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

Приветствия!