Interpolator — was ist das, Interpolationskurven in Android

Was ist Interpolator?

Interpolator — ein Interface in Android, das den Bruchteilswert des Animationsfortschritts (von 0.0 bis 1.0) auf einen tatsächlichen Wert mit modifizierter Geschwindigkeit abbildet. Wenn eine Animation 300 Millisekunden dauert, ruft das System für jeden Frame den Interpolator auf und übergibt den aktuellen Fortschritt. Der Interpolator gibt einen modifizierten Wert zurück — zum Beispiel durchläuft die Animation mit AccelerateInterpolator bei 50% der Zeit nur etwa 25% des Pfades und simuliert so eine Beschleunigung.

Mathematisch kann Interpolator als Funktion f(t) dargestellt werden, wobei t die normalisierte Zeit [0, 1] und f(t) der normalisierte Wert [0, 1] (oder breiter für Overshoot/Bounce) ist. LinearInterpolator gibt f(t) = t zurück — das Objekt bewegt sich mit konstanter Geschwindigkeit. AccelerateInterpolator approximiert f(t) = t², DecelerateInterpolator approximiert f(t) = 1 − (1 − t)², was einen sanften Start oder Abschluss erzeugt. Im Android Animation Framework wird Interpolator sowohl auf ValueAnimator als auch auf ObjectAnimator und ViewPropertyAnimator angewendet und bietet einen einheitlichen Ansatz zur Geschwindigkeitssteuerung auf allen Ebenen.

Integrierte Android-Interpolatoren

Android bietet 9 integrierte Interpolatoren, jeder mit seinem eigenen mathematischen Modell. Die Wahl des Interpolators bestimmt den Charakter der Animation: Physikalität (Bounce), Elastizität (Overshoot) oder Glätte (AccelerateDecelerate).

Jeder Interpolator hat eine XML-Deklaration in res/interpolator/ und eine Kotlin-Klasse im Paket android.view.animation. AccelerateDecelerateInterpolator wird am häufigsten verwendet: seine Kurve ähnelt der Easing-Funktion ease-in-out in CSS. Für Android-Apps mit Material Design wird OvershootInterpolator für Floating Action Buttons (FAB) empfohlen — er erzeugt einen Hüpfeffekt beim Erscheinen.

PathInterpolator: benutzerdefinierte Kurven

PathInterpolator — ein auf einer Bezier-Kurve basierender Interpolator, der über ein Path-Objekt definiert wird. Verfügbar ab API 21 (Android 5.0). Ermöglicht das visuelle Entwerfen der Geschwindigkeitskurve — der Designer zeichnet die Kurve, der Entwickler überträgt sie über Kontrollpunktkoordinaten in Code. Es wird nur kubische Bezier unterstützt (zwei Kontrollpunkte C1, C2).

Die PathInterpolator-Kurve beginnt immer am Punkt (0,0) und endet bei (1,1). Kontrollpunkte definieren die Form: (x1, y1) — der Startpunkt, (x2, y2) — der Endpunkt. x-Werte müssen im Bereich [0,1] liegen — dies garantiert Monotonie über die Zeit. y-Werte können [0,1] überschreiten — dies erzeugt einen Overshoot- oder Anticipate-Effekt. Zum Beispiel verwendet das standardmäßige Material Design die fast-out-slow-in-Kurve mit Kontrollpunkten (0.4, 0.0, 0.2, 1.0). Bei IT Sectr erstellen wir benutzerdefinierte PathInterpolators für jedes Designsystem — dies gewährleistet konsistente Animationen auf allen Bildschirmen.

Erstellen eines eigenen Interpolators

Wenn integrierte Interpolatoren Ihr Szenario nicht abdecken, ermöglicht Android die Erstellung eines benutzerdefinierten durch Implementierung des TimeInterpolator-Interfaces. Die einzige Methode ist getInterpolation(input: Float): Float. Input ist der aktuelle Animationsfortschritt von 0 bis 1; output ist der modifizierte Wert. Output kann für Overshoot- oder Bounce-Effekte über [0,1] hinausgehen.

Typische benutzerdefinierte Interpolatoren: gedämpfter Bounce-Effekt (über 1.0 hinausgehen und zurückkehren), elastischer Effekt (sinusförmige Dämpfung), Step-Interpolator (diskrete Sprünge). Benutzerdefinierte Interpolatoren können auch über XML mit dem Tag <interpolator> und Angabe der Klasse definiert werden. Android Studio hat eine integrierte Interpolator-Vorschau im Layout Inspector — sie zeigt die tatsächliche Kurve für den ausgewählten Interpolator an und vereinfacht so die Fehlersuche.

Codebeispiele in Kotlin

Beispiel 1: AccelerateDecelerateInterpolator mit ValueAnimator

Basisanimation für Schaltflächenskalierung mit einem symmetrischen Interpolator. ValueAnimator ändert den Wert von 1.0 auf 1.2 und zurück, und AccelerateDecelerateInterpolator sorgt für eine flüssige Bewegung.

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 erzeugt eine sanfte Beschleunigung zu Beginn und eine sanfte Verzögerung am Ende. Der REVERSE-Modus wiederholt die Animation in die entgegengesetzte Richtung und erzeugt einen Pulseeffekt. Dieses Muster wird für Aktionsschaltflächen verwendet, um die Aufmerksamkeit des Benutzers auf ein wichtiges Oberflächenelement zu lenken.

Beispiel 2: PathInterpolator mit benutzerdefinierter Kurve

Benutzerdefinierte Kurve mit Overshoot-Effekt — das Objekt überschwingt die Zielposition um 10% und kehrt zurück. Die Kontrollpunkte (0.4, 0.0, 0.6, 1.3) definieren einen beschleunigten Eintritt mit Überschwingen.

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 akzeptiert einen Path mit einer kubischen Bezier-Kurve. Im Beispiel überschwingt das Element die Zielposition (y=1.3 bei 60% der Zeit) und kehrt zur Endposition zurück. Der Path muss entlang der x-Achse streng monoton sein, sonst läuft die Animation rückwärts. Zur Überprüfung verwenden Sie den Layout Inspector in Android Studio.

Beispiel 3: Benutzerdefinierter BounceInterpolator

Benutzerdefinierter Interpolator mit gedämpftem Bounce-Effekt. Implementierung über TimeInterpolator mit vier Dämpfungszyklen.

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

Der benutzerdefinierte DampedBounceInterpolator erzeugt 4 gedämpfte Stöße mit einem Dämpfungsfaktor von 0.85. Die Methode getInterpolation nimmt einen linearen Input entgegen und gibt einen Wert mit Federeffekt zurück. Bei IT Sectr verwenden wir diesen Interpolator für die Einblendanimation von Benachrichtigungen — der Stoß erzeugt ein Gefühl von Physikalität und lenkt die Aufmerksamkeit.