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
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