Interpolator — bu nədir, Android-də interpolyasiya əyriləri

Interpolator nədir?

Interpolator — Android-də animasiya gedişinin kəsr qiymətini (0.0-dan 1.0-a qədər) dəyişdirilmiş sürətlə faktiki qiymətə çevirən interfeysdir. Animasiya 300 millisaniyə davam edərsə, sistem hər kadr üçün Interpolator-u çağırır, cari irəliləyişi ötürür. Interpolator dəyişdirilmiş dəyər qaytarır — məsələn, AccelerateInterpolator üçün vaxtın 50%-də animasiya yolun yalnız ~25%-ni keçir, sürətlənməni simulyasiya edir.

Riyazi olaraq Interpolator f(t) funksiyası kimi təqdim edilə bilər, burada t — normallaşdırılmış vaxt [0, 1], f(t) isə normallaşdırılmış dəyərdir [0, 1] (və ya Overshoot/Bounce üçün daha geniş). Xətti interpolator f(t) = t qaytarır — obyekt sabit sürətlə hərəkət edir. AccelerateInterpolator f(t) = t², DecelerateInterpolator isə f(t) = 1 − (1 − t)² yaxınlaşmasını edir, hamar başlanğıc və ya sonluq yaradır. Android Animation Framework-də Interpolator həm ValueAnimator, həm də ObjectAnimator və ViewPropertyAnimator üçün tətbiq olunur ki, bu da bütün səviyyələrdə sürəti idarə etmək üçün vahid yanaşma verir.

Android-in daxili interpolatorları

Android 9 daxili interpolator təklif edir, hər biri öz riyazi modeli ilə. Interpolator seçimi animasiyanın xarakterini müəyyən edir: fizikilik (Bounce), elastiklik (Overshoot) və ya hamarlıq (AccelerateDecelerate).

Hər bir interpolatorun res/interpolator/ faylında XML bəyannaməsi və android.view.animation paketində Kotlin sinfi var. AccelerateDecelerateInterpolator — ən çox istifadə olunan: onun əyrisi CSS-də ease-in-out funksiyasını xatırladır. Material Design ilə Android tətbiqləri üçün floating action button (FAB) düymələri üçün OvershootInterpolator tövsiyə olunur — görünəndə „sıçrama" effekti yaradır.

PathInterpolator: xüsusi əyrilər

PathInterpolator — Path obyekti vasitəsilə təyin edilmiş Bezier əyrisinə əsaslanan interpolatordur. API 21-dən (Android 5.0) etibarən mövcuddur. Sürət əyrisini vizual olaraq dizayn etməyə imkan verir — dizayner əyrini çəkir, proqramçı onu nəzarət nöqtələrinin koordinatları vasitəsilə koda köçürür. Yalnız kubik Bezier (iki nəzarət nöqtəsi C1, C2) dəstəklənir.

PathInterpolator əyrisi həmişə (0,0) nöqtəsində başlayır və (1,1) nöqtəsində bitir. Nəzarət nöqtələri formanı müəyyən edir: (x1, y1) — başlanğıc nöqtəsi, (x2, y2) — son nöqtə. x dəyərləri [0,1] diapazonunda olmalıdır — bu, zamanla monotonluğu təmin edir. y dəyərləri [0,1] diapazonundan kənara çıxa bilər — bu, aşırma (overshoot) və ya geri çəkilmə (anticipate) effekti yaradır. Məsələn, standart Material Design (0.4, 0.0, 0.2, 1.0) nəzarət nöqtələri ilə fast-out-slow-in əyrisindən istifadə edir. IT Sectr-də hər bir dizayn sistemi üçün xüsusi PathInterpolator qururuq — bu, bütün ekranlarda animasiyaların vahidliyini təmin edir.

Öz Interpolatorunuzu yaratmaq

Daxili interpolatorlar ssenarini əhatə etmirsə, Android TimeInterpolator interfeysini tətbiq etməklə öz interpolatorunuzu yaratmağa imkan verir. Tək metod — getInterpolation(input: Float): Float. Input — 0-dan 1-ə qədər cari animasiya irəliləyişi; output — dəyişdirilmiş dəyər. Output aşırma və ya sıçrayış effektləri üçün [0,1] diapazonundan kənara çıxa bilər.

Tipik xüsusi interpolatorlar: sönən sıçrayış effekti (1.0-dan kənara çıxma və qayıtma), elastik effekt (sinusoidal sönmə), addım interpolatoru (diskret sıçrayışlar). Xüsusi interpolatorlar həmçinin XML vasitəsilə <interpolator> teqi və sinif göstərilməklə təyin edilə bilər. Android Studio-da Layout Inspector-da daxili Interpolator ön baxışı var — seçilmiş interpolator üçün real əyrini göstərir, bu da sazlamanı asanlaşdırır.

Kotlin-də kod nümunələri

Nümunə 1: AccelerateDecelerateInterpolator ValueAnimator ilə

Simmetrik interpolatordan istifadə edərək düymə miqyasının əsas animasiyası. ValueAnimator dəyəri 1.0-dan 1.2-yə və geriyə dəyişir, AccelerateDecelerateInterpolator isə hərəkəti hamar edir.

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 başlanğıcda hamar artım və sonda hamar qayıdış yaradır. REVERSE metodu animasiyanı tərs istiqamətdə təkrarlayaraq pulsasiya effekti yaradır. Bu nümunə hərəkət düymələri üçün istifadə olunur, istifadəçinin diqqətini interfeysin əsas elementinə cəlb edir.

Nümunə 2: PathInterpolator xüsusi əyri ilə

Aşırma effekti ilə xüsusi əyri — obyekt hədəf mövqeyini 10% aşır və qayıdır. (0.4, 0.0, 0.6, 1.3) nəzarət nöqtələri aşırma ilə sürətlənmiş girişi təyin edir.

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 kubik Bezier əyrisi ilə Path qəbul edir. Nümunədə element hədəf mövqeyini „aşır" (vaxtın 60%-də y=1.3) və finala qayıdır. Path x oxu boyunca ciddi monoton olmalıdır, əks halda animasiya geriyə gedəcək. Yoxlamaq üçün Android Studio-da Layout Inspector istifadə edin.

Nümunə 3: Xüsusi BounceInterpolator

Sönən sıçrayış effekti ilə öz interpolatoru. Dörd sönmə dövrü ilə TimeInterpolator vasitəsilə tətbiq.

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

Xüsusi DampedBounceInterpolator 0.85 sönmə əmsalı ilə 4 sönən sıçrayış yaradır. getInterpolation metodu xətti input qəbul edir və „yay" effekti ilə dəyər qaytarır. IT Sectr-də bu interpolatoru bildirişlərin görünmə animasiyası üçün istifadə edirik — sıçrayış fizikilik hissi yaradır və diqqəti cəlb edir.