Interpolator — nedir, Android'de interpolasyon eğrileri

Interpolator nedir?

Interpolator — Android'de bir arayüz olup, animasyon ilerlemesinin kesirli değerini (0.0'dan 1.0'a) değiştirilmiş hızla gerçek bir değere eşler. Bir animasyon 300 milisaniye sürerse, sistem her kare için Interpolator'ü çağırır ve mevcut ilerlemeyi iletir. Interpolator değiştirilmiş bir değer döndürür — örneğin, AccelerateInterpolator ile zamanın %50'sinde animasyon yolun yalnızca ~%25'ini katetmiş olur ve hızlanmayı simüle eder.

Matematiksel olarak Interpolator, t normalize edilmiş zaman [0, 1] ve f(t) normalize edilmiş değer [0, 1] (Overshoot/Bounce için daha geniş) olmak üzere bir f(t) fonksiyonu olarak temsil edilebilir. LinearInterpolator f(t) = t döndürür — nesne sabit hızla hareket eder. AccelerateInterpolator f(t) = t²'ye yaklaşır, DecelerateInterpolator f(t) = 1 − (1 − t)²'ye yaklaşarak yumuşak bir başlangıç veya bitiş oluşturur. Android Animation Framework'te Interpolator, ValueAnimator, ObjectAnimator ve ViewPropertyAnimator'ün her ikisine de uygulanarak tüm seviyelerde hız kontrolü için birleşik bir yaklaşım sağlar.

Android'in yerleşik interpolatorleri

Android, her biri kendi matematiksel modeline sahip 9 yerleşik interpolator sunar. Interpolator seçimi animasyonun karakterini belirler: fiziksellik (Bounce), esneklik (Overshoot) veya yumuşaklık (AccelerateDecelerate).

Her interpolatorün res/interpolator/ içinde bir XML bildirimi ve android.view.animation paketinde bir Kotlin sınıfı vardır. AccelerateDecelerateInterpolator en sık kullanılanıdır: eğrisi CSS'deki ease-in-out yumuşatma fonksiyonuna benzer. Material Design ile Android uygulamaları için, kayan eylem butonları (FAB) için OvershootInterpolator önerilir — göründüğünde bir zıplama efekti yaratır.

PathInterpolator: özel eğriler

PathInterpolator — bir Path nesnesi aracılığıyla tanımlanan Bezier eğrisi tabanlı bir interpolatordür. API 21'den (Android 5.0) itibaren kullanılabilir. Hız eğrisini görsel olarak tasarlamaya izin verir — tasarımcı eğriyi çizer, geliştirici kontrol noktası koordinatları aracılığıyla koda aktarır. Yalnızca kübik Bezier desteklenir (iki kontrol noktası C1, C2).

PathInterpolator eğrisi her zaman (0,0) noktasından başlar ve (1,1)'de biter. Kontrol noktaları şekli tanımlar: (x1, y1) — başlangıç noktası, (x2, y2) — bitiş noktası. x değerleri [0,1] aralığında olmalıdır — bu, zaman içinde monotonluğu garanti eder. y değerleri [0,1] dışına çıkabilir — bu, bir aşma veya beklenti efekti yaratır. Örneğin, standart Material Design, kontrol noktaları (0.4, 0.0, 0.2, 1.0) ile fast-out-slow-in eğrisini kullanır. IT Sectr'de her tasarım sistemi için özel PathInterpolator'lar oluşturuyoruz — bu, tüm ekranlarda tutarlı animasyonlar sağlar.

Kendi Interpolator'ünüzü oluşturma

Yerleşik interpolatorler senaryonuzu kapsamıyorsa, Android TimeInterpolator arayüzünü uygulayarak özel bir tane oluşturmanıza izin verir. Tek yöntem getInterpolation(input: Float): Float'tır. Input, 0'dan 1'e kadar mevcut animasyon ilerlemesidir; output, değiştirilmiş değerdir. Output, aşma veya zıplama efektleri için [0,1] dışına çıkabilir.

Tipik özel interpolatorler: sönümlü zıplama efekti (1.0'ın üzerine çıkıp geri dönme), elastik efekt (sinüzoidal sönümleme), adım interpolatorü (ayrık sıçramalar). Özel interpolatorler <interpolator> etiketi ve sınıf belirtilerek XML aracılığıyla da tanımlanabilir. Android Studio'da Layout Inspector'da yerleşik bir Interpolator önizlemesi bulunur — seçilen interpolator için gerçek eğriyi göstererek hata ayıklamayı basitleştirir.

Kotlin'de kod örnekleri

Örnek 1: ValueAnimator ile AccelerateDecelerateInterpolator

Simetrik bir interpolator kullanan temel düğme ölçek animasyonu. ValueAnimator değeri 1.0'dan 1.2'ye ve geri değiştirir ve AccelerateDecelerateInterpolator hareketi yumuşatır.

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şlangıçta yumuşak hızlanma ve sonda yumuşak yavaşlama oluşturur. REVERSE modu animasyonu ters yönde tekrarlayarak bir nabız efekti oluşturur. Bu desen, kullanıcının dikkatini önemli bir arayüz öğesine çekmek için eylem butonlarında kullanılır.

Örnek 2: Özel eğri ile PathInterpolator

Aşma efektli özel eğri — nesne hedef konumu %10 aşar ve geri döner. Kontrol noktaları (0.4, 0.0, 0.6, 1.3) aşmalı hızlandırılmış girişi tanımlar.

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 kübik Bezier eğrisine sahip bir Path kabul eder. Örnekte, öğe hedef konumu (zamanın %60'ında y=1.3) aşar ve son konuma geri döner. Path, x ekseni boyunca kesinlikle monoton olmalıdır, aksi takdirde animasyon geriye doğru gider. Doğrulama için Android Studio'da Layout Inspector'ı kullanın.

Örnek 3: Özel BounceInterpolator

Sönümlü zıplama efektli özel interpolator. Dört sönümleme döngüsüyle TimeInterpolator aracılığıyla uygulama.

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

Özel DampedBounceInterpolator, 0.85 sönümleme katsayısıyla 4 sönümlü zıplama oluşturur. getInterpolation yöntemi doğrusal girdi alır ve yay efektiyle bir değer döndürür. IT Sectr'de bu interpolatorü bildirim görünüm animasyonu için kullanıyoruz — zıplama fiziksellik hissi yaratır ve dikkat çeker.