javascript - 在 keyDown 上创建 JS 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;
        }
    }

正如我所说，如果我按下空格键，矩形就会按照我想要的方式旋转，但在完成旋转后，varrotate 会按照我想要的方式设置回 false，并且在再次按下空格键后，就不会再旋转。

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

Answer 1

这是因为您已经将矩形旋转到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;
    });