Interpolator — apa itu, kurva interpolasi di Android

Apa itu Interpolator?

Interpolator — antarmuka di Android yang memetakan nilai pecahan kemajuan animasi (dari 0.0 hingga 1.0) ke nilai aktual dengan kecepatan yang dimodifikasi. Jika animasi berlangsung 300 milidetik, sistem memanggil Interpolator untuk setiap frame, meneruskan kemajuan saat ini. Interpolator mengembalikan nilai yang dimodifikasi — misalnya, untuk AccelerateInterpolator pada 50% waktu, animasi hanya menempuh ~25% jalur, mensimulasikan percepatan.

Secara matematis, Interpolator dapat direpresentasikan sebagai fungsi f(t), di mana t adalah waktu yang dinormalisasi [0, 1], dan f(t) adalah nilai yang dinormalisasi [0, 1] (atau lebih luas untuk Overshoot/Bounce). Interpolator linier mengembalikan f(t) = t — objek bergerak dengan kecepatan konstan. AccelerateInterpolator mengaproksimasi f(t) = t², DecelerateInterpolator — f(t) = 1 − (1 − t)², menciptakan awal atau akhir yang halus. Di Android Animation Framework, Interpolator diterapkan baik untuk ValueAnimator maupun ObjectAnimator dan ViewPropertyAnimator, memberikan pendekatan terpadu untuk manajemen kecepatan di semua level.

Interpolator bawaan Android

Android menawarkan 9 interpolator bawaan, masing-masing dengan model matematisnya sendiri. Pemilihan interpolator menentukan karakter animasi: fisik (Bounce), elastisitas (Overshoot) atau kehalusan (AccelerateDecelerate).

Setiap interpolator memiliki deklarasi XML di res/interpolator/ dan kelas Kotlin di paket android.view.animation. AccelerateDecelerateInterpolator — yang paling sering digunakan: kurvanya menyerupai fungsi easing ease-in-out di CSS. Untuk aplikasi Android dengan Material Design, OvershootInterpolator direkomendasikan untuk tombol floating action button (FAB) — menciptakan efek 'melompat' saat muncul.

PathInterpolator: kurva khusus

PathInterpolator — interpolator berdasarkan kurva Bezier, didefinisikan melalui objek Path. Tersedia sejak API 21 (Android 5.0). Memungkinkan merancang kurva kecepatan secara visual — desainer menggambar kurva, pengembang memindahkannya ke kode melalui koordinat titik kontrol. Hanya Bezier kubik (dua titik kontrol C1, C2) yang didukung.

Kurva PathInterpolator selalu dimulai di titik (0,0) dan berakhir di (1,1). Titik kontrol menentukan bentuk: (x1, y1) — titik di awal, (x2, y2) — di akhir. Nilai x harus dalam rentang [0,1] — ini menjamin monotonisitas dalam waktu. Nilai y dapat keluar dari [0,1] — ini menciptakan efek overshoot atau antisipasi. Misalnya, Material Design standar menggunakan kurva fast-out-slow-in dengan titik kontrol (0.4, 0.0, 0.2, 1.0). Di IT Sectr kami membangun PathInterpolator khusus untuk setiap sistem desain — ini menjamin keseragaman animasi di semua layar.

Membuat Interpolator sendiri

Jika interpolator bawaan tidak mencakup skenario, Android memungkinkan membuat sendiri melalui implementasi antarmuka TimeInterpolator. Satu-satunya metode — getInterpolation(input: Float): Float. Input — kemajuan animasi saat ini dari 0 hingga 1; output — nilai yang dimodifikasi. Output dapat keluar dari [0,1] untuk efek overshoot atau pantulan.

Interpolator khusus yang umum: efek bounce dengan redaman (keluar dari 1.0 dan kembali), efek elastic (redaman sinusoidal), step-interpolator (lompatan diskrit). Interpolator khusus juga dapat didefinisikan melalui XML dengan tag <interpolator> dan menyebutkan kelas. Di Android Studio ada pratinjau Interpolator bawaan di Layout Inspector — menampilkan kurva nyata untuk interpolator yang dipilih, memudahkan debugging.

Contoh kode di Kotlin

Contoh 1: AccelerateDecelerateInterpolator dengan ValueAnimator

Animasi dasar skala tombol menggunakan interpolator simetris. ValueAnimator mengubah nilai dari 1.0 ke 1.2 dan kembali, dan AccelerateDecelerateInterpolator membuat gerakan menjadi halus.

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 menciptakan peningkatan halus di awal dan pengembalian halus di akhir. Metode REVERSE mengulang animasi dalam arah terbalik, menciptakan efek pulsasi. Pola ini digunakan untuk tombol aksi, menarik perhatian pengguna ke elemen kunci antarmuka.

Contoh 2: PathInterpolator dengan kurva khusus

Kurva khusus dengan efek overshoot — objek melampaui posisi target sebesar 10% dan kembali. Titik kontrol (0.4, 0.0, 0.6, 1.3) menentukan masuk yang dipercepat dengan overshoot.

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 menerima Path dengan kurva Bezier kubik. Dalam contoh, elemen 'melampaui' posisi target (y=1.3 pada 60% waktu) dan kembali ke akhir. Path harus monoton ketat sepanjang sumbu x, jika tidak animasi akan mundur. Untuk verifikasi gunakan Layout Inspector di Android Studio.

Contoh 3: BounceInterpolator khusus

Interpolator sendiri dengan efek pantulan teredam. Implementasi melalui TimeInterpolator dengan empat siklus redaman.

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

Interpolator khusus DampedBounceInterpolator menciptakan 4 pantulan teredam dengan koefisien redaman 0.85. Metode getInterpolation menerima input linier dan mengembalikan nilai dengan efek 'pegas'. Di IT Sectr kami menggunakan interpolator ini untuk animasi kemunculan notifikasi — pantulan menciptakan rasa fisik dan menarik perhatian.