how do I time animations with createjs / easeljs?

Question

I have four objects I want to appear, one after another, with one second in between. What's the standard way of doing time-based animation?

My idea is to to continually ask for the Ticker's time for a period of 5 seconds, and when the Ticker hits the 1-, 2-second marks, the objects get created:

startAnimationTime = Ticker.getTime();
while (Ticker.getTime()-startTime < 5000) {
    if (Ticker.getTime() == 1000) {
        // create first object
    } else if (Ticker.getTime() == 2000) {
        // create second object
    } else if ...

Is there a more elegant way of doing this? Thanks!

Answer 1

You could use TweenJS for this. Other than animation, it makes a swell timer, mainly due to the chaining you can do with it.

var tween = createjs.Tween.get(this).wait(1);
for (var i=0; i<10; i++) {
    tween.wait(2000).call(createObjectFunction, [i, otherArg], this);
}
tween.call(doneFunction, null, this); // Call something when done

This will run a function every 2 seconds, 10 times.