在 keyDown 上的 CreateJS Tween答案

【问题标题】：CreateJS Tween on keyDown在 keyDown 上的 CreateJS Tween
【发布时间】：2015-08-30 14:42:23
【问题描述】：

我在 keydown 上实现 TweenJS 时遇到问题。它只补间一次，然后如果我按下键，就没有另一个补间了。

到目前为止我所拥有的是：

var rotate =  false;

document.onkeydown = keyDown;
document.onkeyup = keyUp;

function keyDown(e) {
    switch(e.keyCode) {
        case 32:
            if(!rotate) {
                rotate = true;
                var t = createjs.Tween.get(rect).to({rotation:360},450, createjs.Ease.BackInOut).call(function(){
                        rotate = false;
                    });
                }
            break;
        }
    }

正如我所说，如果我点击空格，矩形会按我想要的方式旋转，但在它完成旋转后，var rotate 会按照我的意愿设置回 false，再按一次空格后就不会再旋转了。

所以，我的问题是如何在 click 或 keyDown 上补间一些元素？

【问题讨论】：

标签： javascript canvas easeljs

【解决方案1】：

这是因为您已经将rect 旋转到 360，所以再次旋转它什么也没做（它已经在它的目标处）。

一个简单的解决方案是在主旋转之前或之后加入一个零持续时间的to() 调用，这会重置旋转值，以便再次对其进行补间。

createjs.Tween.get(rect)
    .to({rotation:0}) // THIS ONE
    .to({rotation:360}, 450, createjs.Ease.BackInOut)
    .call(function(){
        rotate = false;
        // You could also reset it here:
        // rect.rotation = 0;
    });

【讨论】：