Technology Article

Tween Transitions

There are numerous transition types to select from. These control how the "playback curve" for your tween looks. That is, it control how the value moves from the starting position to the ending position. Here is a list of the available transitions types:

  • Linear
  • Quadratic
  • Cubic
  • Quartic
  • Quintic
  • Sine
  • Back
  • Bounce

Each has a different curve which can give your tween a totally different feel. You specify the transition type in the options parameter of the tween when creating it. If you wanted Cubic then you would use:

local tween = tweener:createTween(obj, 0.5, {x = 1}, {transition = luster.transitions.Cubic.easeIn})

It's important to note that each transition type has multiple easing options. Easing control whether the emphasis of the motion is on the beginning or the end. Basically, it control the acceleration of the tween. Most transition types have easeIn, easeOut, easeInOut, and easeOutIn as options. Bounce does not have easeInOut or easeOutIn available.

NOTE: When tweening Quaternions, you can only select Linear, Quadratic, Cubic, Quartic, Quintic, or Sine as transitions. Back and Bounce are not available.

For a visual description of tweening equations and what their curves look like you can go to the following link. This a library for AS3 that handles advanced tweening, and uses the same tweening equations to control them as Luster.