Interpolator — co to je, křivky interpolace v Androidu

Co je Interpolator?

Interpolator — rozhraní v Androidu, které mapuje zlomkovou hodnotu průběhu animace (od 0.0 do 1.0) na skutečnou hodnotu se změněnou rychlostí. Pokud animace trvá 300 milisekund, systém volá Interpolator pro každý snímek a předává aktuální průběh. Interpolator vrací upravenou hodnotu — například pro AccelerateInterpolator v 50% času animace urazí pouze ~25% cesty, čímž simuluje zrychlení.

Matematicky lze Interpolator znázornit jako funkci f(t), kde t je normalizovaný čas [0, 1] a f(t) je normalizovaná hodnota [0, 1] (nebo širší pro Overshoot/Bounce). Lineární interpolátor vrací f(t) = t — objekt se pohybuje konstantní rychlostí. AccelerateInterpolator aproximuje f(t) = t², DecelerateInterpolator — f(t) = 1 − (1 − t)², což vytváří hladký start nebo konec. V Android Animation Framework se Interpolator aplikuje jak na ValueAnimator, tak na ObjectAnimator a ViewPropertyAnimator, což poskytuje jednotný přístup k řízení rychlosti na všech úrovních.

Vestavěné interpolátory Androidu

Android nabízí 9 vestavěných interpolátorů, každý s vlastním matematickým modelem. Volba interpolátoru určuje charakter animace: fyzikálnost (Bounce), pružnost (Overshoot) nebo plynulost (AccelerateDecelerate).

Každý interpolátor má XML deklaraci v res/interpolator/ a Kotlin třídu v balíčku android.view.animation. AccelerateDecelerateInterpolator — nejčastěji používaný: jeho křivka připomíná easing funkci ease-in-out v CSS. Pro Android aplikace s Material Design se doporučuje OvershootInterpolator pro tlačítka floating action button (FAB) — při zobrazení vytváří efekt „poskakování".

PathInterpolator: vlastní křivky

PathInterpolator — interpolátor založený na Bezierově křivce, definovaný prostřednictvím objektu Path. K dispozici od API 21 (Android 5.0). Umožňuje vizuálně navrhnout křivku rychlosti — designér nakreslí křivku, vývojář ji přenese do kódu pomocí souřadnic řídicích bodů. Podporována je pouze kubická Bezier (dva řídicí body C1, C2).

Křivka PathInterpolator vždy začíná v bodě (0,0) a končí v (1,1). Řídicí body určují tvar: (x1, y1) — bod na začátku, (x2, y2) — na konci. Hodnoty x musí být v rozsahu [0,1] — to zaručuje monotónnost v čase. Hodnoty y mohou přesahovat [0,1] — to vytváří efekt přestřelu (overshoot) nebo odtahu (anticipate). Například standardní Material Design používá křivku fast-out-slow-in s řídicími body (0.4, 0.0, 0.2, 1.0). V IT Sectr stavíme vlastní PathInterpolator pro každý designový systém — to zaručuje jednotnost animací na všech obrazovkách.

Vytvoření vlastního Interpolatoru

Pokud vestavěné interpolátory nepokrývají scénář, Android umožňuje vytvořit vlastní implementací rozhraní TimeInterpolator. Jediná metoda — getInterpolation(input: Float): Float. Input — aktuální průběh animace od 0 do 1; output — upravená hodnota. Output může přesahovat [0,1] pro efekty přestřelu nebo odskoku.

Typické vlastní interpolátory: bounce efekt s tlumením (přesah 1.0 a návrat), elastic efekt (sinusové tlumení), step-interpolátor (diskrétní skoky). Vlastní interpolátory lze také definovat pomocí XML s tagem <interpolator> a uvedením třídy. V Android Studio je vestavěný náhled Interpolator v Layout Inspector — zobrazuje skutečnou křivku pro vybraný interpolátor, což usnadňuje ladění.

Příklady kódu v Kotlin

Příklad 1: AccelerateDecelerateInterpolator s ValueAnimator

Základní animace měřítka tlačítka pomocí symetrického interpolátoru. ValueAnimator mění hodnotu z 1.0 na 1.2 a zpět a AccelerateDecelerateInterpolator činí pohyb plynulým.

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 vytváří plynulé zvýšení na začátku a plynulý návrat na konci. Metoda REVERSE opakuje animaci v opačném směru a vytváří efekt pulzace. Tento vzor se používá pro tlačítka akcí, přitahuje pozornost uživatele ke klíčovému prvku rozhraní.

Příklad 2: PathInterpolator s vlastní křivkou

Vlastní křivka s efektem overshoot — objekt přestřelí cílovou pozici o 10% a vrátí se. Řídicí body (0.4, 0.0, 0.6, 1.3) určují zrychlený vstup s přestřelem.

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 přijímá Path s kubickou Bezierovou křivkou. V příkladu prvek „přestřelí" cílovou pozici (y=1.3 v 60% času) a vrátí se na konec. Path musí být přísně monotónní podél osy x, jinak půjde animace pozpátku. Pro ověření použijte Layout Inspector v Android Studio.

Příklad 3: Vlastní BounceInterpolator

Vlastní interpolátor s efektem tlumených odskoků. Implementace pomocí TimeInterpolator se čtyřmi cykly tlumení.

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

Vlastní DampedBounceInterpolator vytváří 4 tlumené odskoky s koeficientem tlumení 0.85. Metoda getInterpolation přijímá lineární vstup a vrací hodnotu s efektem „pružiny". V IT Sectr používáme tento interpolátor pro animaci zobrazení oznámení — odskok vytváří pocit fyzikálnosti a přitahuje pozornost.