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.

Answer 2

I would suggest using TweenMax/GSAP an awesome tweening engine with a timeline engine as well. You could do what you want in various ways. Simplest would be:

TweenMax.delayedCall(1, function(){//create first object });
TweenMax.delayedCall(2, function(){//create second object });
etc...

...or use TimelineMax or TimelineLite to properly control things.

Just realised it's basically exactly what @Lanny said but using a different tweening engine. The advantage of Lannys suggestion is tweenJS is already there in createJS, I just use TweenMax/GSAP because I'm used to it ;)