Can animations be chained?

[ogrotten]

I'd like to have animations/tweens that run in succession.

For example, say you have a roulette wheel: startspinwheel, slowspinwheel, stopspinwheel, each one starting with the previous one stops.

My attempts at doing so include dot-chaining

this.animate('startspinwheel').animate('slowspinwheel').animate('stopspinwheel');

as well as multiple lines (which could run into a processing problem)

this.animate('startspinwheel');
this.animate('slowspinwheel');
this.animate('stopspinwheel');

what's the best way to achieve this?

[starwed]

Calling animate doens't queue an animation, but starts one immediately.

If you look at the docs for SpriteAnimation, there's a list of events fired at the top. This will be the way to chain/queue up animations -- you'd bind to the AnimationEnd event. If you want to easily chain multiple animations at the same time, you'll probably want to creat some helper methods that use a queue of animations, pulling a new one out of the queue each time AnimationEnd is fired. (Using events like this is a standard technique in Crafty.)

If you wanted a nice component wrapper around the concept, the basic design could be as follows. (I have not run the following code, so there are likely some bugs/typos!)

Crafty.c("AnimationQueue", {
    _animationQueue: null,

    init: function() {
        // Each entity has its own queue
        this._animationQueue = [];
    },

    events: {
        "AnimationEnd": "animateNext"
    },

    // Pull the next animation out of the queue and run it
    // Trigger an event once the queue is exhausted
    animateNext: function() {
        if (this._animationQueue.length > 0) {
            this.animate(this._animationQueue.shift());
        } 
        else {
            this.trigger("AnimationQueueEmpty");
        }
        return this;
    },

    // Call this like e.queueAnimations('first', 'second', 'etc')
    // Could also rewrite to accept an array directly
    queueAnimations: function() {
        // Push the arguments array onto our animation queue
        Array.prototype.push.apply(this._animationQueue, arguments)
        this._animationQueue.push(queue);
        this.animateNext();
        return this;
    }
}

Each entity with that component keeps an internal queue of animations, and after each one complete runs the next.

[ogrotten]

Thank you.