Code Monkey home page Code Monkey logo

Comments (2)

starwed avatar starwed commented on June 9, 2024

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.

from crafty.

ogrotten avatar ogrotten commented on June 9, 2024

Thank you.

from crafty.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.