Interpolator — ce este, curbele de interpolare în Android

Ce este Interpolator?

Interpolator — interfață în Android care mapează valoarea fracționară a progresului animației (de la 0.0 la 1.0) la valoarea reală cu viteză modificată. Dacă animația durează 300 de milisecunde, sistemul apelează Interpolator pentru fiecare cadru, transmițând progresul curent. Interpolator returnează o valoare modificată — de exemplu, pentru AccelerateInterpolator la 50% din timp, animația parcurge doar ~25% din drum, simulând accelerarea.

Matematic, Interpolator poate fi reprezentat ca funcția f(t), unde t este timpul normalizat [0, 1], iar f(t) este valoarea normalizată [0, 1] (sau mai largă pentru Overshoot/Bounce). Interpolatorul liniar returnează f(t) = t — obiectul se mișcă cu viteză constantă. AccelerateInterpolator aproximează f(t) = t², DecelerateInterpolator — f(t) = 1 − (1 − t)², creând un început sau sfârșit fluent. În Android Animation Framework, Interpolator se aplică atât ValueAnimator, cât și ObjectAnimator și ViewPropertyAnimator, oferind o abordare unitară a gestionării vitezei la toate nivelurile.

Interpolatoare Android încorporate

Android oferă 9 interpolatoare încorporate, fiecare cu propriul model matematic. Alegerea interpolatorului determină caracterul animației: fizicitate (Bounce), elasticitate (Overshoot) sau fluență (AccelerateDecelerate).

Fiecare interpolator are o declarație XML în res/interpolator/ și o clasă Kotlin în pachetul android.view.animation. AccelerateDecelerateInterpolator — cel mai frecvent utilizat: curba sa amintește funcția ease-in-out din CSS. Pentru aplicațiile Android cu Material Design, se recomandă OvershootInterpolator pentru butoanele floating action button (FAB) — creează un efect de „săritură" la apariție.

PathInterpolator: curbe personalizate

PathInterpolator — interpolator bazat pe curba Bezier, definit prin obiectul Path. Disponibil de la API 21 (Android 5.0). Permite proiectarea vizuală a curbei vitezei — designerul desenează curba, dezvoltatorul o transferă în cod prin coordonatele punctelor de control. Este acceptat doar Bezier cubic (două puncte de control C1, C2).

Curba PathInterpolator începe întotdeauna în punctul (0,0) și se termină în (1,1). Punctele de control determină forma: (x1, y1) — punct la început, (x2, y2) — la sfârșit. Valorile x trebuie să fie în intervalul [0,1] — aceasta garantează monotonitatea în timp. Valorile y pot ieși din [0,1] — aceasta creează efectul de depășire (overshoot) sau retragere (anticipate). De exemplu, Material Design standard utilizează curba fast-out-slow-in cu punctele de control (0.4, 0.0, 0.2, 1.0). În IT Sectr construim PathInterpolator personalizate pentru fiecare sistem de design — garantează uniformitatea animațiilor pe toate ecranele.

Crearea propriului Interpolator

Dacă interpolatoarele încorporate nu acoperă scenariul, Android permite crearea unuia propriu prin implementarea interfeței TimeInterpolator. Singura metodă — getInterpolation(input: Float): Float. Input — progresul curent al animației de la 0 la 1; output — valoarea modificată. Output poate ieși din [0,1] pentru efecte de depășire sau săritură.

Interpolatoare personalizate tipice: efect bounce cu amortizare (ieșire din 1.0 și revenire), efect elastic (amortizare sinusoidală), step-interpolator (salturi discrete). Interpolatoarele personalizate pot fi definite și prin XML cu tagul <interpolator> și specificarea clasei. În Android Studio există o previzualizare incorporată Interpolator în Layout Inspector — arată curba reală pentru interpolatorul selectat, simplificând depanarea.

Exemple de cod în Kotlin

Exemplul 1: AccelerateDecelerateInterpolator cu ValueAnimator

Animația de bază a scării unui buton utilizând interpolatorul simetric. ValueAnimator modifică valoarea de la 1.0 la 1.2 și înapoi, iar AccelerateDecelerateInterpolator face mișcarea fluentă.

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 creează o creștere lină la început și o revenire lină la sfârșit. Metoda REVERSE repetă animația în direcție inversă, creând un efect de pulsație. Acest model este utilizat pentru butoanele de acțiune, atrăgând atenția utilizatorului asupra elementului cheie al interfeței.

Exemplul 2: PathInterpolator cu curbă personalizată

Curba personalizată cu efect overshoot — obiectul depășește poziția țintă cu 10% și revine. Punctele de control (0.4, 0.0, 0.6, 1.3) definesc o intrare accelerată cu depășire.

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 acceptă un Path cu curbă Bezier cubică. În exemplu, elementul „depășește" poziția țintă (y=1.3 la 60% din timp) și revine la final. Path trebuie să fie strict monoton pe axa x, altfel animația va merge înapoi. Pentru verificare, utilizați Layout Inspector în Android Studio.

Exemplul 3: BounceInterpolator personalizat

Interpolator propriu cu efect de salturi amortizate. Implementare prin TimeInterpolator cu patru cicluri de amortizare.

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

Interpolatorul personalizat DampedBounceInterpolator creează 4 salturi amortizate cu coeficient de amortizare 0.85. Metoda getInterpolation primește input liniar și returnează o valoare cu efect de „arc". În IT Sectr folosim acest interpolator pentru animația de apariție a notificărilor — saltul creează senzația de fizicitate și atrage atenția.