Interpolator — bu nima, Android-da interpolyatsiya egri chiziqlari

Interpolator nima?

Interpolator — Android-da animatsiya jarayonining kasr qiymatini (0.0 dan 1.0 gacha) o'zgartirilgan tezlik bilan haqiqiy qiymatga aks ettiruvchi interfeys. Agar animatsiya 300 millisekund davom etsa, tizim har bir kadr uchun Interpolator-ni chaqiradi, joriy taraqqiyotni uzatadi. Interpolator o'zgartirilgan qiymatni qaytaradi — masalan, AccelerateInterpolator uchun vaqtning 50% ida animatsiya yo'lining faqat ~25% ini bosib o'tadi, tezlashishni simulyatsiya qiladi.

Matematik jihatdan Interpolator f(t) funksiyasi sifatida ifodalanishi mumkin, bu erda t — normallashtirilgan vaqt [0, 1], f(t) esa normallashtirilgan qiymat [0, 1] (yoki Overshoot/Bounce uchun kengroq). Chiziqli interpolator f(t) = t qaytaradi — ob'ekt doimiy tezlik bilan harakat qiladi. AccelerateInterpolator f(t) = t², DecelerateInterpolator esa f(t) = 1 − (1 − t)² yaqinlashishini amalga oshiradi, silliq boshlanish yoki tugash yaratadi. Android Animation Framework-da Interpolator ValueAnimator, ObjectAnimator va ViewPropertyAnimator uchun qo'llaniladi, bu barcha darajalarda tezlikni boshqarishning yagona yondashuvini beradi.

Android-ning o'rnatilgan interpolatorlari

Android 9 ta o'rnatilgan interpolatorni taklif qiladi, har biri o'z matematik modeliga ega. Interpolator tanlovi animatsiyaning xarakterini belgilaydi: fiziklik (Bounce), elastiklik (Overshoot) yoki silliqlik (AccelerateDecelerate).

Har bir interpolator res/interpolator/ da XML deklaratsiyasiga va android.view.animation paketida Kotlin sinfiga ega. AccelerateDecelerateInterpolator — eng ko'p ishlatiladigan: uning egri chizig'i CSS-dagi ease-in-out funksiyasini eslatadi. Material Design bilan Android ilovalari uchun floating action button (FAB) tugmalari uchun OvershootInterpolator tavsiya etiladi — paydo bo'lganda „sakrash" effektini yaratadi.

PathInterpolator: maxsus egri chiziqlar

PathInterpolator — Path obyekti orqali aniqlangan Bezier egri chizig'iga asoslangan interpolator. API 21 (Android 5.0) dan boshlab mavjud. Tezlik egri chizig'ini vizual ravishda loyihalash imkonini beradi — dizayner egri chiziqni chizadi, dasturchi uni nazorat nuqtalarining koordinatalari orqali kodga o'tkazadi. Faqat kubik Bezier (ikkita nazorat nuqtasi C1, C2) qo'llab-quvvatlanadi.

PathInterpolator egri chizig'i har doim (0,0) nuqtasida boshlanadi va (1,1) nuqtasida tugaydi. Nazorat nuqtalari shaklni aniqlaydi: (x1, y1) — boshidagi nuqta, (x2, y2) — oxiridagi nuqta. x qiymatlari [0,1] oralig'ida bo'lishi kerak — bu vaqt bo'yicha monotonlikni kafolatlaydi. y qiymatlari [0,1] dan tashqariga chiqishi mumkin — bu oshirib yuborish (overshoot) yoki orqaga tortilish (anticipate) effektini yaratadi. Masalan, standart Material Design (0.4, 0.0, 0.2, 1.0) nazorat nuqtalari bilan fast-out-slow-in egri chizig'idan foydalanadi. IT Sectr-da har bir dizayn tizimi uchun maxsus PathInterpolator quramiz — bu barcha ekranlarda animatsiyalarning bir xilligini kafolatlaydi.

O'z Interpolatoringizni yaratish

Agar o'rnatilgan interpolatorlar stsenariyni qamrab olmasa, Android TimeInterpolator interfeysini amalga oshirish orqali o'z interpolatoringizni yaratishga imkon beradi. Yagona metod — getInterpolation(input: Float): Float. Input — 0 dan 1 gacha bo'lgan joriy animatsiya taraqqiyoti; output — o'zgartirilgan qiymat. Output oshirib yuborish yoki sakrash effektlari uchun [0,1] dan tashqariga chiqishi mumkin.

Odatdagi maxsus interpolatorlar: so'nuvchi sakrash effekti (1.0 dan tashqariga chiqish va qaytish), elastik effekt (sinusoidal so'nish), qadam interpolatori (diskret sakrashlar). Maxsus interpolatorlar XML orqali <interpolator> tegi va sinf ko'rsatilishi bilan ham aniqlanishi mumkin. Android Studio-da Layout Inspector da o'rnatilgan Interpolator oldindan ko'rish mavjud — tanlangan interpolator uchun haqiqiy egri chiziqni ko'rsatadi, bu disk raskadrovkani osonlashtiradi.

Kotlin-da kod misollari

Misol 1: AccelerateDecelerateInterpolator ValueAnimator bilan

Simmetrik interpolatordan foydalanib tugma masshtabining asosiy animatsiyasi. ValueAnimator qiymatni 1.0 dan 1.2 gacha va orqaga o'zgartiradi, AccelerateDecelerateInterpolator esa harakatni silliq qiladi.

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 boshida silliq o'sish va oxirida silliq qaytish yaratadi. REVERSE metodi animatsiyani teskari yo'nalishda takrorlab, pulsatsiya effektini yaratadi. Ushbu naqsh harakat tugmalari uchun ishlatiladi, foydalanuvchi diqqatini interfeysning asosiy elementiga jalb qiladi.

Misol 2: PathInterpolator maxsus egri chiziq bilan

Oshirib yuborish effekti bilan maxsus egri chiziq — ob'ekt maqsadli pozitsiyani 10% ga oshirib yuboradi va qaytadi. (0.4, 0.0, 0.6, 1.3) nazorat nuqtalari oshirib yuborish bilan tezlashtirilgan kirishni belgilaydi.

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 egri chizig'i bilan Path ni qabul qiladi. Misolda element maqsadli pozitsiyani «oshib yuboradi» (vaqtning 60% ida y=1.3) va finalga qaytadi. Path x o'qi bo'ylab qat'iy monoton bo'lishi kerak, aks holda animatsiya orqaga ketadi. Tekshirish uchun Android Studio-da Layout Inspector dan foydalaning.

Misol 3: Maxsus BounceInterpolator

So'nuvchi sakrash effekti bilan o'z interpolatori. To'rtta so'nish sikli bilan TimeInterpolator orqali amalga oshirish.

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

Maxsus DampedBounceInterpolator 0.85 so'nish koeffitsienti bilan 4 ta so'nuvchi sakrash yaratadi. getInterpolation metodi chiziqli input ni qabul qiladi va «prujina» effekti bilan qiymat qaytaradi. IT Sectr-da bu interpolatordan bildirishnomalarning paydo bo'lish animatsiyasi uchun foydalanamiz — sakrash fiziklik hissini yaratadi va diqqatni jalb qiladi.