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

正如我所说，如果我按空间，矩形就会按照我想要的方式旋转，但是在完成旋转后，var rotate会根据我的需要重新设置为false，并且在按下空格后再没有其他旋转。

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

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

1 个答案: