Interpolation

Interpolation

Commonly known as tweening, interpolation is useful for generating values between two discrete end points using various curve functions. Often used with key-framed animation, interpolation allows an animator to specify a sparse collection of explicit frames for an animation and then generate a smooth transition between these frames computationally. The simplest form of interpolation is linear interpolation such as that available directly in the Vector2 (code) and Vector3 (code) classes. The Interpolation (code) class provides more interesting results by using non-linear curve functions to interpolate values.

Types of Interpolation

These are the basic built-in types of interpolation:

  • Bounce
  • Circle
  • Elastic
  • Exponential
  • Fade
  • Power
  • Sine
  • Swing

Code Example

// Written in Kotlin

val easAlpha:Interpolation = Interpolation.fade
val lifeTime:Int = 2
var elapsed:Float = 0f
..
fun update(delta:Float)
{
    elapsed += delta

    val progress = Math.min(1f, elapsed/lifeTime)   // 0 -> 1 
    val alpha = easAlpha.apply(progress)
}

Most types offer three varieties which bias towards one or the other or both ends of the curve creating an easing in or out of the animation.

See InterpolationTest for a visual display of each interpolation.

Visual display of interpolations

bounce | bounceIn | bounceOut | circle — | — | — | — bounce | bouncein | bounceout | circle circleIn | circleOut | elastic | elasticIn circlein | circleout | elastic | elasticin elasticOut | exp5 | exp5In | exp5Out elasticout | exp5 | exp5in | exp5out exp10 | exp10In | exp10Out | fade exp10 | exp10in | exp10out | fade fastSlow | linear | pow2 | pow2In |
fastSlow | linear | pow2 | pow2in pow2InInverse | pow2Out | pow2OutInverse | pow3 | pow3In | pow3InInverse | pow3Out | pow3OutInverse | pow4 pow2InInverse | pow2Out | pow2OutInverse | pow3 pow3In | pow3InInverse | pow3Out | pow3OutInverse pow3in | pow3InInverse | pow3Out | pow3OutInverse pow4 | pow4In | pow4Out | pow5 pow4 | pow4In | pow4Out | pow5 pow5In | pow5Out | sine | sineIn pow5In | pow5Out | sine | sineIn sineOut | slowFast | smooth | smooth2 sineOut | slowFast | smooth | smooth2 smoother | swing | swingIn | swingOut smoother | swing | swingIn | swingOut