-
Notifications
You must be signed in to change notification settings - Fork 560
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can animations be chained? #1195
Comments
Calling 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 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. |
Thank you. |
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)
what's the best way to achieve this?
The text was updated successfully, but these errors were encountered: