When tweening properties with MC Tween, there are several different animation types (or easing equation or transition types) that can be used . They are all based on Robert Penner’s easing equations, so if you have played with other tweening systems, chances are you already know them by name (I even used his own words to describe most of the transition types here). If you don’t, don’t worry; they’re quite simple to learn and use: just specify the type you want depending on the transition you want to achieve.
How to chose the best transition type? That’s a tough question. It depends on where you are applying the tweening. As a rule of thumb, I usually use easeOutExpo or easeInOutExpo on movieclip sliding and transformation (or easeOutBack or easeOutElastic when I want something extra-fancy); I use linear transitions on all color transitions, including alpha changes, and on all sound transitions. Be careful, though, to take animation time into consideration too – if you do a easeOutElastic transition in 0.3 seconds, you won’t even notice it. So try different ammount of times until you find the value that fits your animation best.
To exemplify the animation types available in a more graphical fashion, below is a list of all of them with a little animation and some explanation: look at the small circle on the right-side of the movie and notice how different animation types make it move differently. The graph on the middle shows the relation between time and value applied when sliding the circle. Keep in mind that while I have chosen to animate an object in this example, ‘moving’ objects is just one of the possibilities of this tweening extension. These different transition types can be applied to alpha changes, rotations, time seeks, sound volume control, or to whichever numerical-based attributes you can think of.
Also notice that the “animation type” parameter is case-insensitive on MC Tween methods. The example movie used below can be download from the examples page (source included).
STANDARD TRANSITION
Example
Description
“linear”
The ‘standard’ animation – starts on the current value and slowly progresses until it reaches the target value, with no easing, acceleration or deacceleration whatsoever.
EQUATION-BASED TRANSITIONS
These animations are the basic acceleration or deacceleration transitions. There are little differences between them – mainly acceleration/deacceleration speed, and the curve acuteness. Chosing the best transition type for each application should be a test-and-see process – depending on how much time your transition will take, different transition types will fit better. That’s how animation tweaking works after all.
Example
Description
“easeInQuad”
Quadratic easing in – starts at zero velocity then accelerates.
“easeOutQuad”
Quadratic easing out – starts at full velocity then deaccelerates to zero.
“easeInOutQuad”
Quadratic easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInCubic”
Cubic easing in – starts at zero velocity then accelerates.
“easeOutCubic”
Cubic easing out – starts at full velocity then deaccelerates to zero.
“easeInOutCubic”
Cubic easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInQuart”
Quartic easing in – starts at zero velocity then accelerates.
“easeOutQuart”
Quartic easing out – starts at full velocity then deaccelerates to zero.
“easeInOutQuart”
Quartic easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInQuint”
Quintic easing in – starts at zero velocity then accelerates.
“easeOutQuint”
Quintic easing out – starts at full velocity then deaccelerates to zero.
“easeInOutQuint”
Quintic easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInSine”
Sinusoidal easing in – starts at zero velocity then accelerates.
“easeOutSine”
Sinusoidal easing out – starts at full velocity then deaccelerates to zero.
“easeInOutSine”
Sinusoidal easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInExpo”
Exponential easing in – starts at zero velocity then accelerates.
“easeOutExpo”
Exponential easing out – starts at full velocity then deaccelerates to zero.
“easeInOutExpo”
Exponential easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInCirc”
Circular easing in – starts at zero velocity then accelerates.
“easeOutCirc”
Circular easing out – starts at full velocity then deaccelerates to zero.
“easeInOutCirc”
Circular easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
SPECIAL TRANSITIONS
These transitions are still equation-based; however, since they perform in a different fashion (not only envolving acceleration or deacceleration), I moved them to a separate list, for organization’s sake. These animation types are great to use sometimes, but overuse can also ruin an interface fast. Use with caution.
Example
Description
“easeInElastic”
Elastic easing in – starts at zero velocity then accelerates.
“easeOutElastic”
Elastic easing out – starts at full velocity then deaccelerates to zero.
“easeInOutElastic”
Elastic easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInBack”
Back easing in – starts at zero velocity then accelerates.
“easeOutBack”
Back easing out – starts at full velocity then deaccelerates to zero.
“easeInOutBack”
Back easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
“easeInBounce”
Bouncing easing in – starts at zero velocity then accelerates.
“easeOutBounce”
Bouncing easing out – starts at full velocity then deaccelerates to zero.
“easeInOutBounce”
Bouncing easing in and out – starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again