Easing curves

From PhiWiki
Jump to: navigation, search

Easing curves describe the relation between x and y coordinates during a timeline. This enables you to create special effects, e.g. bouncing of items during a move animation. Usually an animation is linear. With easing curves you can change this. Currently the following curves are available:

  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
  • linear

The default easing curve (if not otherwise stated) is easeOutQuad which has the effect of a little slow down at the end of the animation.