Interpolator — mi ez, interpolációs görbék Androidon

Mi az Interpolator?

Interpolator — interfész Androidon, amely az animáció előrehaladásának tört értékét (0.0-tól 1.0-ig) leképezi a tényleges értékre módosított sebességgel. Ha az animáció 300 ezredmásodpercig tart, a rendszer minden képkockához meghívja az Interpolator-t, átadva az aktuális előrehaladást. Az Interpolator egy módosított értéket ad vissza — például az AccelerateInterpolator esetében az idő 50%-ánál az animáció csak ~25%-át teszi meg az útnak, gyorsulást szimulálva.

Matematikailag az Interpolator f(t) függvényként ábrázolható, ahol t a normalizált idő [0, 1], f(t) pedig a normalizált érték [0, 1] (vagy szélesebb Overshoot/Bounce esetén). A lineáris interpolátor f(t) = t-t ad vissza — az objektum állandó sebességgel mozog. Az AccelerateInterpolator f(t) = t²-t közelít, a DecelerateInterpolator — f(t) = 1 − (1 − t)²-t, sima kezdést vagy befejezést létrehozva. Az Android Animation Framework-ben az Interpolator mind a ValueAnimator, mind az ObjectAnimator és ViewPropertyAnimator esetében alkalmazható, egységes megközelítést biztosítva a sebesség kezelésére minden szinten.

Beépített Android interpolátorok

Az Android 9 beépített interpolátort kínál, mindegyik saját matematikai modellel. Az interpolátor kiválasztása meghatározza az animáció jellemzőjét: fizikaiasság (Bounce), rugalmasság (Overshoot) vagy simaság (AccelerateDecelerate).

Minden interpolátornak van XML deklarációja a res/interpolator/ mappában és Kotlin osztálya az android.view.animation csomagban. AccelerateDecelerateInterpolator — a leggyakrabban használt: görbéje a CSS ease-in-out easing függvényére emlékeztet. Material Design-os Android alkalmazásokhoz az OvershootInterpolator ajánlott a floating action button (FAB) gombokhoz — „felpattanó" hatást kelt megjelenéskor.

PathInterpolator: egyedi görbék

PathInterpolator — Bezier-görbén alapuló interpolátor, Path objektumon keresztül definiálva. API 21-től (Android 5.0) elérhető. Lehetővé teszi a sebességgörbe vizuális megtervezését — a tervező megrajzolja a görbét, a fejlesztő átviszi kódba a vezérlőpontok koordinátáin keresztül. Csak köbös Bezier (két vezérlőpont C1, C2) támogatott.

A PathInterpolator görbéje mindig a (0,0) pontban kezdődik és az (1,1) pontban végződik. A vezérlőpontok határozzák meg az alakot: (x1, y1) — pont az elején, (x2, y2) — a végén. Az x értékeknek [0,1] tartományban kell lenniük — ez garantálja a monotonitást időben. Az y értékek kiléphetnek a [0,1] tartományból — ez túllövés (overshoot) vagy visszahúzás (anticipate) hatást kelt. Például a standard Material Design a fast-out-slow-in görbét használja (0.4, 0.0, 0.2, 1.0) vezérlőpontokkal. Az IT Sectr-nél minden tervezési rendszerhez egyedi PathInterpolator-t építünk — ez garantálja az animációk egységességét minden képernyőn.

Saját Interpolator létrehozása

Ha a beépített interpolátorok nem fedik le a forgatókönyvet, az Android lehetővé teszi saját létrehozását a TimeInterpolator interfész implementálásával. Az egyetlen metódus — getInterpolation(input: Float): Float. Input — aktuális animációs előrehaladás 0-tól 1-ig; output — módosított érték. Az output kiléphet a [0,1] tartományból túllövés vagy pattogás hatásokhoz.

Tipikus egyedi interpolátorok: bounce effektus csillapítással (kilépés 1.0-ból és visszatérés), elastic effektus (szinuszos csillapítás), step-interpolátor (diszkrét ugrások). Egyedi interpolátorok XML-ben is definiálhatók a <interpolator> tag és osztály megadásával. Az Android Studio-ban beépített Interpolator előnézet van a Layout Inspector-ban — mutatja a tényleges görbét a kiválasztott interpolátorhoz, megkönnyítve a hibakeresést.

Kód példák Kotlinban

1. példa: AccelerateDecelerateInterpolator ValueAnimator-ral

Gomb méretarányának alap animációja szimmetrikus interpolátor használatával. A ValueAnimator az értéket 1.0-ról 1.2-re és vissza változtatja, az AccelerateDecelerateInterpolator pedig simává teszi a mozgást.

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 sima növekedést hoz létre az elején és sima visszatérést a végén. A REVERSE metódus fordított irányban ismétli az animációt, pulzáló hatást keltve. Ez a minta műveleti gombokhoz használatos, felhívva a felhasználó figyelmét a felület kulcselemére.

2. példa: PathInterpolator egyedi görbével

Egyedi görbe overshoot effektussal — az objektum 10%-kal túllövi a célpozíciót és visszatér. A (0.4, 0.0, 0.6, 1.3) vezérlőpontok gyorsított belépést határoznak meg túllövéssel.

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 Path-et fogad köbös Bezier görbével. A példában az elem „túllövi" a célpozíciót (y=1.3 az idő 60%-ánál) és visszatér a végpontba. A Path-nek szigorúan monotonnak kell lennie az x tengely mentén, különben az animáció visszafelé megy. Ellenőrzéshez használja a Layout Inspector-t az Android Studio-ban.

3. példa: Egyedi BounceInterpolator

Saját interpolátor csillapított pattogó effektussal. Implementáció TimeInterpolator-on keresztül négy csillapítási ciklussal.

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

Az egyedi DampedBounceInterpolator 4 csillapított pattogást hoz létre 0.85 csillapítási együtthatóval. A getInterpolation metódus lineáris inputot fogad és „rugós" effektussal ad vissza értéket. Az IT Sectr-nél ezt az interpolátort használjuk értesítések megjelenési animációjához — a pattogás fizikaiasság érzetét kelti és felkelti a figyelmet.