Interpolator — ano ito, mga kurba ng interpolation sa Android

Ano ang Interpolator?

Interpolator — interface sa Android na nagma-map ng fractional na halaga ng pag-unlad ng animation (mula 0.0 hanggang 1.0) sa aktwal na halaga na may binagong bilis. Kung ang animation ay tumatagal ng 300 millisecond, tinatawagan ng system ang Interpolator para sa bawat frame, na nagpapasa ng kasalukuyang pag-unlad. Ibinabalik ng Interpolator ang binagong halaga — halimbawa, para sa AccelerateInterpolator sa 50% ng oras, ang animation ay tumatahak lamang ng ~25% ng landas, na ginagaya ang pagbilis.

Sa matematika, maaaring katawanin ang Interpolator bilang function f(t), kung saan ang t ay ang normalized na oras [0, 1], at ang f(t) ay ang normalized na halaga [0, 1] (o mas malawak para sa Overshoot/Bounce). Ang linear na interpolator ay nagbabalik ng f(t) = t — gumagalaw ang bagay sa patuloy na bilis. Ang AccelerateInterpolator ay nag-aaproksima ng f(t) = t², ang DecelerateInterpolator — f(t) = 1 − (1 − t)², na lumilikha ng makinis na simula o pagtatapos. Sa Android Animation Framework, inilalapat ang Interpolator sa parehong ValueAnimator at ObjectAnimator at ViewPropertyAnimator, na nagbibigay ng pinag-isang diskarte sa pamamahala ng bilis sa lahat ng antas.

Mga built-in na interpolator ng Android

Nag-aalok ang Android ng 9 na built-in na interpolator, bawat isa ay may kanya-kanyang mathematical model. Ang pagpili ng interpolator ay tumutukoy sa karakter ng animation: pagiging pisikal (Bounce), pagiging elastic (Overshoot) o kinis (AccelerateDecelerate).

Bawat interpolator ay may XML deklarasyon sa res/interpolator/ at Kotlin class sa package na android.view.animation. AccelerateDecelerateInterpolator — pinakamadalas gamitin: ang kurba nito ay kahawig ng easing function na ease-in-out sa CSS. Para sa mga Android application na may Material Design, inirerekomenda ang OvershootInterpolator para sa mga floating action button (FAB) — lumilikha ng epekto ng 'pagtalon' kapag lumilitaw.

PathInterpolator: custom na mga kurba

PathInterpolator — interpolator batay sa Bezier curve, na tinukoy sa pamamagitan ng Path object. Available mula API 21 (Android 5.0). Nagbibigay-daan sa biswal na pagdisenyo ng kurba ng bilis — gumuhit ang taga-disenyo ng kurba, inililipat ito ng developer sa code sa pamamagitan ng mga coordinate ng control point. Tanging kubikong Bezier (dalawang control point C1, C2) ang sinusuportahan.

Ang kurba ng PathInterpolator ay laging nagsisimula sa punto (0,0) at nagtatapos sa (1,1). Tinutukoy ng mga control point ang hugis: (x1, y1) — punto sa simula, (x2, y2) — sa dulo. Ang mga halaga ng x ay dapat nasa saklaw na [0,1] — ginagarantiyahan nito ang monotonisidad sa oras. Ang mga halaga ng y ay maaaring lumabas sa [0,1] — lumilikha ito ng epekto ng paglampas (overshoot) o pag-atras (anticipate). Halimbawa, ang karaniwang Material Design ay gumagamit ng fast-out-slow-in curve na may control point (0.4, 0.0, 0.2, 1.0). Sa IT Sectr gumagawa kami ng custom na PathInterpolator para sa bawat sistema ng disenyo — ginagarantiyahan nito ang pagkakapareho ng mga animation sa lahat ng screen.

Paglikha ng sarili mong Interpolator

Kung hindi saklaw ng mga built-in na interpolator ang sitwasyon, pinapayagan ng Android na lumikha ng sarili mo sa pamamagitan ng pagpapatupad ng interface na TimeInterpolator. Ang tanging paraan — getInterpolation(input: Float): Float. Input — kasalukuyang pag-unlad ng animation mula 0 hanggang 1; output — binagong halaga. Ang output ay maaaring lumabas sa [0,1] para sa mga epekto ng paglampas o pagtalbog.

Karaniwang custom na interpolator: bounce effect na may damping (paglabas sa 1.0 at pagbabalik), elastic effect (sinusoidal damping), step-interpolator (diskreto na pagtalon). Ang custom na interpolator ay maaari ring tukuyin sa pamamagitan ng XML gamit ang tag na <interpolator> at pagbanggit ng klase. Sa Android Studio mayroong built-in na preview ng Interpolator sa Layout Inspector — nagpapakita ng aktwal na kurba para sa napiling interpolator, pinapadali ang debugging.

Mga halimbawa ng code sa Kotlin

Halimbawa 1: AccelerateDecelerateInterpolator na may ValueAnimator

Batayang animation ng sukat ng pindutan gamit ang simetriko na interpolator. Binabago ng ValueAnimator ang halaga mula 1.0 hanggang 1.2 at pabalik, at ginagawang makinis ng AccelerateDecelerateInterpolator ang paggalaw.

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 lumilikha ng makinis na pagtaas sa simula at makinis na pagbabalik sa dulo. Ang paraang REVERSE ay inuulit ang animation sa kabaligtaran na direksyon, na lumilikha ng epekto ng pulsation. Ang pattern na ito ay ginagamit para sa mga pindutan ng aksyon, nakakaakit ng atensyon ng gumagamit sa pangunahing elemento ng interface.

Halimbawa 2: PathInterpolator na may custom na kurba

Custom na kurba na may overshoot effect — lumalampas ang bagay sa target na posisyon ng 10% at bumabalik. Tinutukoy ng mga control point (0.4, 0.0, 0.6, 1.3) ang pinabilis na pagpasok na may paglampas.

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 tumatanggap ng Path na may kubikong Bezier curve. Sa halimbawa, ang elemento ay 'lumalampas' sa target na posisyon (y=1.3 sa 60% ng oras) at bumabalik sa dulo. Ang Path ay dapat na mahigpit na monotoniko sa kahabaan ng x-axis, kung hindi ay babaliktad ang animation. Para sa pagpapatunay gamitin ang Layout Inspector sa Android Studio.

Halimbawa 3: Custom na BounceInterpolator

Sariling interpolator na may damped bounce effect. Pagpapatupad sa pamamagitan ng TimeInterpolator na may apat na cycle ng damping.

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

Ang custom na DampedBounceInterpolator ay lumilikha ng 4 na damped na talbog na may damping coefficient na 0.85. Ang paraang getInterpolation ay tumatanggap ng linear input at nagbabalik ng halaga na may epekto ng 'spring'. Sa IT Sectr ginagamit namin ang interpolator na ito para sa animation ng paglitaw ng mga notification — ang pagtalbog ay lumilikha ng pakiramdam ng pisikalidad at nakakaakit ng atensyon.