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

Question

我有这个 moveStep() 函数让精灵移动 Tween.js,

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

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

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

我能想到这个方法：

计算函数中的参数并创建一个字符串，然后eval最后的链式字符串。不过这样好像不太好

Answer 1

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

要链接补间，您需要对同一 Tween 实例调用额外的 to 调用。如果您预先创建了一个 Tween，并将其传递给该方法，那将满足您的要求：

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

希望对您有所帮助。

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

How to create blocked animation with Tween.js?

javascript

createjs

tween.js