Interpolator — vad är det, interpoleringskurvor i Android

Vad är Interpolator?

Interpolator — gränssnitt i Android som mappar bråkdalsvärdet för animationens framsteg (från 0.0 till 1.0) till det faktiska värdet med ändrad hastighet. Om animationen varar 300 millisekunder anropar systemet Interpolator för varje bildruta och skickar den aktuella framstegen. Interpolator returnerar ett modifierat värde — till exempel för AccelerateInterpolator vid 50% av tiden färdas animationen endast ~25% av vägen, vilket simulerar acceleration.

Matematiskt kan Interpolator representeras som funktionen f(t), där t är den normaliserade tiden [0, 1] och f(t) är det normaliserade värdet [0, 1] (eller bredare för Overshoot/Bounce). Den linjära interpolatorn returnerar f(t) = t — objektet rör sig med konstant hastighet. AccelerateInterpolator approximerar f(t) = t², DecelerateInterpolator — f(t) = 1 − (1 − t)², vilket skapar en mjuk start eller avslutning. I Android Animation Framework tillämpas Interpolator på både ValueAnimator och ObjectAnimator och ViewPropertyAnimator, vilket ger ett enhetligt tillvägagångssätt för hastighetshantering på alla nivåer.

Inbyggda Android-interpolatorer

Android erbjuder 9 inbyggda interpolatorer, var och en med sin egen matematiska modell. Valet av interpolator bestämmer animationens karaktär: fysikalitet (Bounce), elasticitet (Overshoot) eller jämnhet (AccelerateDecelerate).

Varje interpolator har en XML-deklaration i res/interpolator/ och en Kotlin-klass i paketet android.view.animation. AccelerateDecelerateInterpolator — den mest använda: dess kurva påminner om easing-funktionen ease-in-out i CSS. För Android-applikationer med Material Design rekommenderas OvershootInterpolator för floating action button (FAB) — skapar en 'hoppande' effekt vid visning.

PathInterpolator: anpassade kurvor

PathInterpolator — interpolator baserad på Bezier-kurva, definierad via ett Path-objekt. Tillgänglig från API 21 (Android 5.0). Gör det möjligt att visuellt designa hastighetskurvan — designern ritar kurvan, utvecklaren överför den till kod via kontrollpunkternas koordinater. Endast kubisk Bezier (två kontrollpunkter C1, C2) stöds.

PathInterpolator-kurvan börjar alltid i punkten (0,0) och slutar i (1,1). Kontrollpunkterna bestämmer formen: (x1, y1) — punkt i början, (x2, y2) — i slutet. x-värden måste vara i intervallet [0,1] — detta garanterar monotonitet över tid. y-värden kan gå utanför [0,1] — detta skapar en effekt av överskridning (overshoot) eller tillbakadragning (anticipate). Till exempel använder standard Material Design kurvan fast-out-slow-in med kontrollpunkter (0.4, 0.0, 0.2, 1.0). Hos IT Sectr bygger vi anpassade PathInterpolator för varje designsystem — detta garanterar enhetlighet i animationer på alla skärmar.

Skapa din egen Interpolator

Om de inbyggda interpolatorerna inte täcker scenariot gör Android det möjligt att skapa en egen genom att implementera gränssnittet TimeInterpolator. Den enda metoden — getInterpolation(input: Float): Float. Input — aktuellt animationsframsteg från 0 till 1; output — modifierat värde. Output kan gå utanför [0,1] för effekter av överskridning eller studs.

Typiska anpassade interpolatorer: bounce-effekt med dämpning (gå utanför 1.0 och återgå), elastic-effekt (sinusformad dämpning), step-interpolator (diskreta hopp). Anpassade interpolatorer kan också definieras via XML med taggen <interpolator> och klassangivelse. I Android Studio finns en inbyggd Interpolator-förhandsvisning i Layout Inspector — visar den faktiska kurvan för den valda interpolatorn, vilket underlättar felsökning.

Kodexempel i Kotlin

Exempel 1: AccelerateDecelerateInterpolator med ValueAnimator

Grundläggande animation av en knapps skala med hjälp av en symmetrisk interpolator. ValueAnimator ändrar värdet från 1.0 till 1.2 och tillbaka, och AccelerateDecelerateInterpolator gör rörelsen jämn.

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 skapar en mjuk ökning i början och en mjuk återgång i slutet. Metoden REVERSE upprepar animationen i motsatt riktning och skapar en pulserande effekt. Detta mönster används för åtgärdsknappar och drar användarens uppmärksamhet till gränssnittets nyckelelement.

Exempel 2: PathInterpolator med anpassad kurva

Anpassad kurva med overshoot-effekt — objektet överskrider målpositionen med 10% och återgår. Kontrollpunkterna (0.4, 0.0, 0.6, 1.3) bestämmer en accelererad start med överskridning.

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 accepterar en Path med kubisk Bezier-kurva. I exemplet 'överskrider' elementet målpositionen (y=1.3 vid 60% av tiden) och återgår till slutpunkten. Path måste vara strikt monoton längs x-axeln, annars går animationen baklänges. För verifiering använd Layout Inspector i Android Studio.

Exempel 3: Anpassad BounceInterpolator

Egen interpolator med dämpad studseffekt. Implementering via TimeInterpolator med fyra dämpningscykler.

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

Den anpassade DampedBounceInterpolator skapar 4 dämpade studsar med dämpningskoefficient 0.85. Metoden getInterpolation tar emot linjär input och returnerar ett värde med 'fjädereffekt'. Hos IT Sectr använder vi denna interpolator för animationsvisning av notifikationer — studsen skapar en känsla av fysikalitet och drar uppmärksamhet.