How to create blocked animation with Tween.js?

Question

I have this moveStep() function to make the Sprite move a step with Tween.js,

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

but if moveStep() is called more than once, the result is the same as when called once (x, y are calculated in the function).

What is the practical way to chain the animations or block the next animation before this one ended?

I could think of this method:

Calculate the parameters in the function and create a string, then eval the chained string at the end. But this seems not so good.

Answer 1

When you get an object for a Tween, it is a shortcut for new createjs.Tween(), so you are just making a new tween instance, which will run immediately.

To chain tweens, you need to call additional to calls on the same Tween instance. If you created a Tween up front, and passed it into the method, that would do what you are asking:

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

You can also construct the to() calls in order.

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

Hope that helps.