KeyDown 上的 CreateJS Tween

Question

我在 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;
        }
    }

正如我所说，如果我点击 space，矩形将按我想要的方式旋转，但在完成旋转后，var rotate 将按我的需要设置回 false，然后再次按下 space没有另一个旋转。

所以，我的问题是如何在单击或按下时补间某些元素？

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

KeyDown 上的 CreateJS Tween

CreateJS Tween on keyDown

javascript

canvas

easeljs