Interpolator — what it is, animation interpolation curves in Android

What is Interpolator?

Interpolator — an interface in Android that maps the fractional value of animation progress (from 0.0 to 1.0) to an actual value with modified speed. If an animation lasts 300 milliseconds, the system calls Interpolator for each frame, passing the current progress. The Interpolator returns a modified value — for example, with AccelerateInterpolator at 50% of time the animation has only traveled ~25% of the path, simulating acceleration.

Mathematically, Interpolator can be represented as a function f(t), where t is normalized time [0, 1], and f(t) is normalized value [0, 1] (or wider for Overshoot/Bounce). LinearInterpolator returns f(t) = t — the object moves at constant speed. AccelerateInterpolator approximates f(t) = t², DecelerateInterpolator approximates f(t) = 1 − (1 − t)², creating smooth start or finish. In Android Animation Framework, Interpolator is applied to both ValueAnimator, ObjectAnimator and ViewPropertyAnimator, providing a unified approach to speed control at all levels.

Built-in Android Interpolators

Android offers 9 built-in interpolators, each with its own mathematical model. The choice of interpolator determines the character of animation: physicality (Bounce), elasticity (Overshoot) or smoothness (AccelerateDecelerate).

Each interpolator has an XML declaration in res/interpolator/ and a Kotlin class in the android.view.animation package. AccelerateDecelerateInterpolator is the most commonly used: its curve resembles the ease-in-out easing function in CSS. For Android applications with Material Design, OvershootInterpolator is recommended for floating action buttons (FAB) — it creates a "bouncing" effect when appearing.

PathInterpolator: Custom Curves

PathInterpolator — an interpolator based on a Bezier curve, defined via a Path object. Available since API 21 (Android 5.0). Allows visually designing the speed curve — the designer draws the curve, the developer transfers it into code through control point coordinates. Only cubic Bezier is supported (two control points C1, C2).

The PathInterpolator curve always starts at point (0,0) and ends at (1,1). Control points define the shape: (x1, y1) — the start point, (x2, y2) — the end point. X values must be in the range [0,1] — this guarantees monotonicity over time. Y values can go outside [0,1] — this creates an overshoot or anticipate effect. For example, standard Material Design uses the fast-out-slow-in curve with control points (0.4, 0.0, 0.2, 1.0). At IT Sectr we build custom PathInterpolators for each design system — this guarantees consistent animations across all screens.

Creating Your Own Interpolator

If built-in interpolators don't cover your scenario, Android allows creating a custom one by implementing the TimeInterpolator interface. The only method is getInterpolation(input: Float): Float. Input is the current animation progress from 0 to 1; output is the modified value. Output can go outside [0,1] for overshoot or bounce effects.

Typical custom interpolators: damped bounce effect (going above 1.0 and returning), elastic effect (sinusoidal damping), step interpolator (discrete jumps). Custom interpolators can also be defined via XML using the <interpolator> tag and specifying the class. Android Studio has a built-in Interpolator preview in Layout Inspector — it shows the actual curve for the selected interpolator, simplifying debugging.

Code Examples in Kotlin

Example 1: AccelerateDecelerateInterpolator with ValueAnimator

Basic button scale animation using a symmetrical interpolator. ValueAnimator changes the value from 1.0 to 1.2 and back, and AccelerateDecelerateInterpolator makes the motion smooth.

import android.animation.ValueAnimator
import android.view.animation.AccelerateDecelerateInterpolator
import android.view.View

fun View.pulseAnimation() {
    ValueAnimator.ofFloat(1.0f, 1.2f).apply {
        duration = 300
        interpolator = AccelerateDecelerateInterpolator()
        repeatCount = 1
        repeatMode = ValueAnimator.REVERSE

        addUpdateListener { animator ->
            val scale = animator.animatedValue as Float
            this@pulseAnimation.scaleX = scale
            this@pulseAnimation.scaleY = scale
        }

        start()
    }
}

AccelerateDecelerateInterpolator creates smooth acceleration at the beginning and smooth deceleration at the end. The REVERSE mode repeats the animation in the opposite direction, creating a pulsing effect. This pattern is used for action buttons, drawing the user's attention to a key interface element.

Example 2: PathInterpolator with Custom Curve

Custom curve with overshoot effect — the object overshoots the target position by 10% and returns. Control points (0.4, 0.0, 0.6, 1.3) define accelerated entry with overshoot.

import android.animation.ObjectAnimator
import android.graphics.Path
import android.view.animation.PathInterpolator
import android.view.View

fun View.slideWithOvershoot() {
    val path = Path().apply {
        cubicTo(0.4f, 0.0f, 0.6f, 1.3f, 1.0f, 1.0f)
    }
    val interpolator = PathInterpolator(path)

    ObjectAnimator.ofFloat(this, "translationY", 200f, 0f).apply {
        duration = 400
        interpolator = interpolator
        start()
    }
}

PathInterpolator accepts a Path with a cubic Bezier curve. In the example, the element "overshoots" the target position (y=1.3 at 60% of time) and returns to the final position. The Path must be strictly monotonic along the x axis, otherwise the animation will go backwards. For verification, use Layout Inspector in Android Studio.

Example 3: Custom BounceInterpolator

Custom interpolator with damped bounce effect. Implementation via TimeInterpolator with four damping cycles.

import android.animation.TimeInterpolator

class DampedBounceInterpolator : TimeInterpolator {

    private val cycles = 4
    private val damping = 0.85f

    override fun getInterpolation(input: Float): Float {
        val t = input * cycles
        val decay = Math.pow(damping.toDouble(), cycles.toDouble()).toFloat()
        val peak = t - (Math.floor(t.toDouble())).toFloat()
        val bounce = Math.sin(peak * Math.PI).toFloat()
        return 1f - bounce * decay * (1f - input)
    }
}

Custom DampedBounceInterpolator creates 4 damped bounces with a damping coefficient of 0.85. The getInterpolation method takes linear input and returns a value with a "spring" effect. At IT Sectr we use this interpolator for notification appearance animation — the bounce creates a feeling of physicality and draws attention.