Interpolator — шта је то, криве интерполације у Android-у

Шта је Interpolator?

Interpolator — интерфејс у Android-у који пресликава разломљену вредност напретка анимације (од 0.0 до 1.0) у стварну вредност са промењеном брзином. Ако анимација траје 300 милисекунди, систем позива Interpolator за сваки кадар, прослеђујући тренутни напредак. Interpolator враћа модификовану вредност — на пример, за AccelerateInterpolator у 50% времена анимација прелази само ~25% пута, симулирајући убрзање.

Математички, Interpolator се може представити као функција f(t), где је t нормализовано време [0, 1], а f(t) нормализована вредност [0, 1] (или шира за Overshoot/Bounce). Линеарни интерполатор враћа f(t) = t — објект се креће константном брзином. AccelerateInterpolator апроксимира f(t) = t², DecelerateInterpolator — f(t) = 1 − (1 − t)², стварајући гладак почетак или завршетак. У Android Animation Framework-у Interpolator се примењује и на ValueAnimator и на ObjectAnimator и ViewPropertyAnimator, што даје јединствени приступ управљању брзином на свим нивоима.

Уграђени интерполатори Android-а

Android нуди 9 уграђених интерполатора, сваки са својим математичким моделом. Избор интерполатора одређује карактер анимације: физичност (Bounce), еластичност (Overshoot) или глаткоћу (AccelerateDecelerate).

Сваки интерполатор има XML декларацију у res/interpolator/ и Kotlin класу у пакету android.view.animation. AccelerateDecelerateInterpolator — најчешће коришћени: његова крива подсећа на easing функцију ease-in-out у CSS-у. За Android апликације са Material Design-ом препоручује се OvershootInterpolator за дугмад floating action button (FAB) — ствара ефекат „поскочивања" при појављивању.

PathInterpolator: прилагођене криве

PathInterpolator — интерполатор заснован на Bezier кривој, дефинисан кроз објекат Path. Доступан од API 21 (Android 5.0). Омогућава визуелно пројектовање криве брзине — дизајнер црта криву, програмер је преноси у код кроз координате контролних тачака. Подржан је само кубични Bezier (две контролне тачке C1, C2).

Крива PathInterpolator-а увек почиње у тачки (0,0) и завршава се у (1,1). Контролне тачке одређују облик: (x1, y1) — тачка на почетку, (x2, y2) — на крају. Вредности x морају бити у опсегу [0,1] — ово гарантује монотоност током времена. Вредности y могу излазити из [0,1] — ово ствара ефекат прелетања (overshoot) или повлачења (anticipate). На пример, стандардни Material Design користи криву fast-out-slow-in са контролним тачкама (0.4, 0.0, 0.2, 1.0). У IT Sectr-у градимо прилагођене PathInterpolator-е за сваки дизајн систем — ово гарантује једнообразност анимација на свим екранима.

Креирање сопственог Interpolator-а

Ако уграђени интерполатори не покривају сценарио, Android омогућава креирање сопственог кроз имплементацију интерфејса TimeInterpolator. Једина метода — getInterpolation(input: Float): Float. Input — тренутни напредак анимације од 0 до 1; output — модификована вредност. Output може излазити из [0,1] за ефекте прелетања или одскока.

Типични прилагођени интерполатори: bounce ефекат са пригушењем (излазак из 1.0 и повратак), elastic ефекат (синусоидално пригушење), step-интерполатор (дискретни скокови). Прилагођени интерполатори се могу дефинисати и кроз XML помоћу тага <interpolator> и навођења класе. У Android Studio-у постоји уграђени преглед Interpolator-а у Layout Inspector-у — приказује стварну криву за изабрани интерполатор, што поједностављује отклањање грешака.

Примери кода у Kotlin-у

Пример 1: AccelerateDecelerateInterpolator са ValueAnimator-ом

Основна анимација скале дугмета коришћењем симетричног интерполатора. ValueAnimator мења вредност од 1.0 до 1.2 и назад, а AccelerateDecelerateInterpolator чини кретање глатким.

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 ствара глатко повећање на почетку и глатки повратак на крају. Метода REVERSE понавља анимацију у обрнутом смеру, стварајући ефекат пулсације. Овај образац се користи за дугмад акција, привлачећи пажњу корисника на кључни елемент интерфејса.

Пример 2: PathInterpolator са прилагођеном кривом

Прилагођена крива са overshoot ефектом — објекат прелеће циљну позицију за 10% и враћа се. Контролне тачке (0.4, 0.0, 0.6, 1.3) задају убрзани улаз са прелетањем.

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 са кубичном Bezier кривом. У примеру, елемент „прелеће" циљну позицију (y=1.3 у 60% времена) и враћа се на финал. Path мора бити строго монотон по оси x, иначе ће анимација ићи уназад. За проверу користите Layout Inspector у Android Studio-у.

Пример 3: Прилагођени BounceInterpolator

Сопствени интерполатор са ефектом пригушених одскока. Имплементација кроз TimeInterpolator са четири циклуса пригушења.

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

Прилагођени DampedBounceInterpolator ствара 4 пригушена одскока са коефицијентом пригушења 0.85. Метода getInterpolation прима линеарни input и враћа вредност са ефектом „опруге". У IT Sectr-у користимо овај интерполатор за анимацију појављивања обавештења — одскок ствара осећај физичности и привлачи пажњу.