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 |
---|---|---|---|
circleIn | circleOut | elastic | elasticIn |
elasticOut | exp5 | exp5In | exp5Out |
exp10 | exp10In | exp10Out | fade |
fastSlow | linear | pow2 | pow2In |
pow2InInverse | pow2Out | pow2OutInverse | pow3 |
pow3In | pow3InInverse | pow3Out | pow3OutInverse |
pow4 | pow4In | pow4Out | pow5 |
pow5In | pow5Out | sine | sineIn |
sineOut | slowFast | smooth | smooth2 |
smoother | swing | swingIn | swingOut |