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

  1. // Written in Kotlin
  2. val easAlpha:Interpolation = Interpolation.fade
  3. val lifeTime:Int = 2
  4. var elapsed:Float = 0f
  5. ..
  6. fun update(delta:Float)
  7. {
  8. elapsed += delta
  9. val progress = Math.min(1f, elapsed/lifeTime) // 0 -> 1
  10. val alpha = easAlpha.apply(progress)
  11. }

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

bouncebounceInbounceOutcircle
bouncebounceinbounceoutcircle
circleIncircleOutelasticelasticIn
circleincircleoutelasticelasticin
elasticOutexp5exp5Inexp5Out
elasticoutexp5exp5inexp5out
exp10exp10Inexp10Outfade
exp10exp10inexp10outfade
fastSlowlinearpow2pow2In
fastSlowlinearpow2pow2in
pow2InInversepow2Outpow2OutInversepow3
pow2InInversepow2Outpow2OutInversepow3
pow3Inpow3InInversepow3Outpow3OutInverse
pow3inpow3InInversepow3Outpow3OutInverse
pow4pow4Inpow4Outpow5
pow4pow4Inpow4Outpow5
pow5Inpow5OutsinesineIn
pow5Inpow5OutsinesineIn
sineOutslowFastsmoothsmooth2
sineOutslowFastsmoothsmooth2
smootherswingswingInswingOut
smootherswingswingInswingOut