Queueing animations - general approach

[Max]

I am wondering, when is general approach for queueing animations?

 

My setup (as3, API, iOS, Android).

 

I have the following situation in my game:

 

1. Game runs animation 1. (several objects with TweenLite.to(...))

2. While animation 1 is running, player requests to start animation 2.

3. It is not possible to run both animation together. So, I want to queue animation 2 until animation 1 done.

 

How should I do it?

[Carl]

The easiest way to manage this is to place animation 1 in a TimelineLite() and then when the user requests animation 2 it will be added to the end of the timeline that holds animation 1.

 

Here is a code snippet:

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;




var timeline:TimelineLite = new TimelineLite();
//this is the main animation that can not be interupted
timeline.to(mc, 6, {x:400});


btn.addEventListener(MouseEvent.CLICK, addAnimation);


function addAnimation(e:MouseEvent):void {
//this animation will play after main animation is finished
timeline.to(mc, 3, {y:200, rotation:360});
btn.visible = false;


if(timeline.progress() < 1) {
trace("your requested animation will be added after the current animation is complete");
}
}

CS5 FLA and swf attached. Be sure to compile with latest version of GSAP

 

What is nice about this is that animation 2 doesn't have to be a single tween, it can be another timeline of tweens. 

 

To see how it works, click the "add animation" button while the box is moving and test again after it is done moving. 

queueAnimation_CS5.zip

[Max]

Thank you Carl! I will try it and reply with my results!

[Max]

Hi Carl, could you please tell me, how can I do several animations simultaneously within animation 1?

[jamiejefferson]

You can nest timelines inside each other, or just add() a group of tweens all at once. Based on Carl's example:

function addAnimation(e:MouseEvent):void {
  //this animation will play after main animation is finished
  
  // add an array of tweens - these will share the same start time
  timeline.add([
    TweenLite.to(mc1, 3, {y:200, rotation:360}),
    TweenLite.to(mc2, 3, {y:200, rotation:360}),
    TweenLite.to(mc3, 3, {y:200, rotation:360})
  ]);

  // or, create a separate timeline, and add that to the main timeline
  var newAnimation:TimelineLite = new TimelineLite();
  // position these tweens however you like in the group
  newAnimation.to(mc1, 3, {y:200, rotation:360}, 1)
              .to(mc2, 3, {y:200, rotation:360}, 0)
              .to(mc3, 3, {y:200, rotation:360}, 0.6);
  timeline.add(newAnimation);

  ...
}

Edit: whoops you asked for more tweens in animation 1, but the same concept applies. In the docs for TimelineLite you might want to check out the position parameter of functions like .to() and .add()

[Carl]

Yeah, Jamie laid it out pretty much how I would (thanks). TimelineLite is a very powerful tool allowing you to easily sequence, offset, or overlap tweens however you like. I would strongly suggest taking Jamie's advice of reading through those docs.Although this video uses JavaScript, it will quickly show you some features of TimelineLite that work exactly the same way in ActionScript

 

http://www.greensock.com/sequence-video/