如何用Tween.js创建块动画？

Question

我有一个moveStep()函数让雪碧用Tween.js移动一步，

createjs.Tween.get(this.lion).to({x: x, y: y}, 300);  

但是，如果moveStep()被多次调用，则结果与调用一次时相同(x，y是在函数中计算的)。

在这个动画结束之前，有什么实用的方法来链接动画或阻止下一个动画呢？

我可以想到这样的方法：

计算函数中的参数并创建一个字符串，然后在结尾处eval链接的字符串。但这似乎不太好。

Answer 1

当您为一个吐温对象创建一个get对象时，它是new createjs.Tween()的一个快捷方式，所以您只是在创建一个新的吐温实例，它将立即运行。

要链接Tween，您需要在同一个吐温实例上调用额外的to调用。如果您预先创建了一个吐温函数，并将其传递给该方法，那么您将按照您的要求进行如下操作：

function moveStep(tween, x, y) {
    tween.to({x: x, y: y}, 300);  
}

var tween = createjs.Tween.get(this.lion);
moveStep(tween, 100,100);
moveStep(tween, 300, 300);

您还可以按照顺序构造to()调用。

var tween = createjs.Tween.get(this.lion)
    .to({x:100,y:100})
    .to({x:300, y:300});

希望这能有所帮助。