Interpolator — wat is het, interpolatiecurven in Android

Wat is Interpolator?

Interpolator — een interface in Android die de fractionele waarde van de animatievoortgang (van 0.0 tot 1.0) koppelt aan de werkelijke waarde met gewijzigde snelheid. Als de animatie 300 milliseconden duurt, roept het systeem Interpolator aan voor elk frame en geeft de huidige voortgang door. Interpolator retourneert een aangepaste waarde — bijvoorbeeld voor AccelerateInterpolator legt de animatie bij 50% van de tijd slechts ~25% van de weg af, wat versnelling simuleert.

Wiskundig kan Interpolator worden voorgesteld als functie f(t), waarbij t de genormaliseerde tijd [0, 1] is en f(t) de genormaliseerde waarde [0, 1] (of breder voor Overshoot/Bounce). De lineaire interpolator retourneert f(t) = t — het object beweegt met constante snelheid. AccelerateInterpolator benadert f(t) = t², DecelerateInterpolator — f(t) = 1 − (1 − t)², wat een vloeiende start of finish creëert. In het Android Animation Framework wordt Interpolator toegepast op zowel ValueAnimator als ObjectAnimator en ViewPropertyAnimator, wat een uniforme benadering van snelheidsbeheer op alle niveaus biedt.

Ingebouwde Android-interpolators

Android biedt 9 ingebouwde interpolators, elk met een eigen wiskundig model. De keuze van de interpolator bepaalt het karakter van de animatie: fysiekheid (Bounce), elasticiteit (Overshoot) of vloeiendheid (AccelerateDecelerate).

Elke interpolator heeft een XML-declaratie in res/interpolator/ en een Kotlin-klasse in het pakket android.view.animation. AccelerateDecelerateInterpolator — de meest gebruikte: zijn curve lijkt op de easing-functie ease-in-out in CSS. Voor Android-applicaties met Material Design wordt OvershootInterpolator aanbevolen voor floating action button (FAB) knoppen — het creëert een 'ophopingseffect' bij verschijnen.

PathInterpolator: aangepaste curven

PathInterpolator — interpolator op basis van een Bezier-curve, gedefinieerd via een Path-object. Beschikbaar vanaf API 21 (Android 5.0). Maakt het mogelijk de snelheidscurve visueel te ontwerpen — de ontwerper tekent de curve, de ontwikkelaar vertaalt deze naar code via de coördinaten van de controlepunten. Alleen kubische Bezier (twee controlepunten C1, C2) wordt ondersteund.

De PathInterpolator-curve begint altijd in punt (0,0) en eindigt in (1,1). De controlepunten bepalen de vorm: (x1, y1) — punt aan het begin, (x2, y2) — aan het einde. x-waarden moeten in het bereik [0,1] liggen — dit garandeert monotonie in de tijd. y-waarden kunnen buiten [0,1] vallen — dit creëert het effect van overschrijding (overshoot) of terugtrekking (anticipate). Standaard Material Design gebruikt bijvoorbeeld de fast-out-slow-in-curve met controlepunten (0.4, 0.0, 0.2, 1.0). Bij IT Sectr bouwen we aangepaste PathInterpolator voor elk ontwerpsysteem — dit garandeert uniformiteit van animaties op alle schermen.

Je eigen Interpolator maken

Als de ingebouwde interpolators het scenario niet dekken, maakt Android het mogelijk je eigen te maken door de interface TimeInterpolator te implementeren. De enige methode — getInterpolation(input: Float): Float. Input — huidige animatievoortgang van 0 tot 1; output — aangepaste waarde. Output kan buiten [0,1] vallen voor overschrijdings- of stuiter-effecten.

Typische aangepaste interpolators: bounce-effect met demping (buiten 1.0 en terugkeer), elastic-effect (sinusvormige demping), step-interpolator (discrete sprongen). Aangepaste interpolators kunnen ook via XML worden gedefinieerd met de tag <interpolator> en klasse-opgave. In Android Studio is er een ingebouwde Interpolator-preview in de Layout Inspector — toont de werkelijke curve voor de geselecteerde interpolator, wat debuggen vergemakkelijkt.

Codevoorbeelden in Kotlin

Voorbeeld 1: AccelerateDecelerateInterpolator met ValueAnimator

Basis animatie van de schaal van een knop met behulp van een symmetrische interpolator. ValueAnimator wijzigt de waarde van 1.0 naar 1.2 en terug, en AccelerateDecelerateInterpolator maakt de beweging vloeiend.

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 creëert een vloeiende toename aan het begin en een vloeiende terugkeer aan het einde. De methode REVERSE herhaalt de animatie in omgekeerde richting, waardoor een pulsatie-effect ontstaat. Dit patroon wordt gebruikt voor actieknoppen en trekt de aandacht van de gebruiker naar het belangrijkste interface-element.

Voorbeeld 2: PathInterpolator met aangepaste curve

Aangepaste curve met overshoot-effect — het object overschrijdt de doelpositie met 10% en keert terug. De controlepunten (0.4, 0.0, 0.6, 1.3) bepalen een versnelde binnenkomst met overschrijding.

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 accepteert een Path met een kubische Bezier-curve. In het voorbeeld 'overschrijdt' het element de doelpositie (y=1.3 op 60% van de tijd) en keert terug naar het einde. Path moet strikt monotoon zijn langs de x-as, anders gaat de animatie achteruit. Gebruik voor verificatie de Layout Inspector in Android Studio.

Voorbeeld 3: Aangepaste BounceInterpolator

Eigen interpolator met gedempt stuiter-effect. Implementatie via TimeInterpolator met vier dempingscycli.

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

De aangepaste DampedBounceInterpolator creëert 4 gedempte stuiteringen met een dempingscoëfficiënt van 0.85. De methode getInterpolation ontvangt lineaire input en retourneert een waarde met een 'veer'-effect. Bij IT Sectr gebruiken we deze interpolator voor de verschijningsanimatie van meldingen — de stuitering creëert een gevoel van fysiekheid en trekt de aandacht.