Interpolator — یہ کیا ہے، Android میں انٹرپولیشن منحنیات

Interpolator کیا ہے؟

Interpolator — Android میں ایک انٹرفیس جو اینیمیشن پیشرفت کی جزوی قیمت (0.0 سے 1.0) کو تبدیل شدہ رفتار کے ساتھ حقیقی قیمت سے map کرتا ہے۔ اگر کوئی اینیمیشن 300 ملی سیکنڈ تک چلتی ہے، تو سسٹم ہر فریم کے لیے Interpolator کو کال کرتا ہے، موجودہ پیشرفت پاس کرتا ہے۔ Interpolator ایک تبدیل شدہ قیمت لوٹاتا ہے — مثال کے طور پر، AccelerateInterpolator کے ساتھ 50% وقت پر اینیمیشن نے صرف ~25% راستہ طے کیا ہے، تیزی کی نقل کرتے ہوئے۔

ریاضیاتی طور پر، Interpolator کو فنکشن f(t) کے طور پر پیش کیا جا سکتا ہے، جہاں t معمول کا وقت [0, 1] ہے، اور f(t) معمول کی قیمت [0, 1] ہے (یا Overshoot/Bounce کے لیے وسیع تر)۔ LinearInterpolator f(t) = t لوٹاتا ہے — شے مستقل رفتار سے چلتی ہے۔ AccelerateInterpolator f(t) = t² کا تخمینہ لگاتا ہے، DecelerateInterpolator f(t) = 1 − (1 − t)² کا تخمینہ لگاتا ہے، ہموار آغاز یا اختتام پیدا کرتا ہے۔ Android Animation Framework میں، Interpolator ValueAnimator، ObjectAnimator اور ViewPropertyAnimator دونوں پر لاگو ہوتا ہے، تمام سطحوں پر رفتار کنٹرول کے لیے ایک متحد نقطہ نظر فراہم کرتا ہے۔

Android کے بلٹ ان انٹرپولیٹر

Android 9 بلٹ ان انٹرپولیٹر پیش کرتا ہے، ہر ایک اپنے ریاضیاتی ماڈل کے ساتھ۔ انٹرپولیٹر کا انتخاب اینیمیشن کے کردار کا تعین کرتا ہے: طبعیت (Bounce)، لچک (Overshoot) یا ہمواری (AccelerateDecelerate)۔

ہر انٹرپولیٹر کے پاس res/interpolator/ میں XML اعلامیہ اور android.view.animation پیکج میں Kotlin کلاس ہے۔ AccelerateDecelerateInterpolator سب سے زیادہ استعمال ہوتا ہے: اس کا منحنی CSS میں ease-in-out easing فنکشن سے مشابہ ہے۔ Material Design والی Android ایپلیکیشنز کے لیے، فلوٹنگ ایکشن بٹن (FAB) کے لیے OvershootInterpolator تجویز کیا جاتا ہے — یہ ظاہر ہونے پر اچھال کا اثر پیدا کرتا ہے۔

PathInterpolator: کسٹم منحنیات

PathInterpolator — Bezier منحنی پر مبنی ایک انٹرپولیٹر، جو Path آبجیکٹ کے ذریعے بیان کیا جاتا ہے۔ API 21 (Android 5.0) سے دستیاب ہے۔ رفتار منحنی کو بصری طور پر ڈیزائن کرنے کی اجازت دیتا ہے — ڈیزائنر منحنی کھینچتا ہے، ڈویلپر اسے کنٹرول پوائنٹ کوآرڈینیٹ کے ذریعے کوڈ میں منتقل کرتا ہے۔ صرف مکعب Bezier تعاون یافتہ ہے (دو کنٹرول پوائنٹس C1، C2)۔

PathInterpolator منحنی ہمیشہ نقطہ (0,0) سے شروع ہوتا ہے اور (1,1) پر ختم ہوتا ہے۔ کنٹرول پوائنٹس شکل کی وضاحت کرتے ہیں: (x1, y1) — نقطہ آغاز، (x2, y2) — نقطہ اختتام۔ x کی قدریں [0,1] کی حد میں ہونی چاہئیں — یہ وقت کے ساتھ یکسانیت کی ضمانت دیتا ہے۔ y کی قدریں [0,1] سے باہر جا سکتی ہیں — یہ زیادتی یا توقع کا اثر پیدا کرتا ہے۔ مثال کے طور پر، معیاری Material Design کنٹرول پوائنٹس (0.4, 0.0, 0.2, 1.0) کے ساتھ fast-out-slow-in منحنی استعمال کرتا ہے۔ IT Sectr میں ہم ہر ڈیزائن سسٹم کے لیے کسٹم PathInterpolator بناتے ہیں — یہ تمام اسکرینوں پر مستقل اینیمیشن کی ضمانت دیتا ہے۔

اپنا Interpolator بنانا

اگر بلٹ ان انٹرپولیٹر آپ کے منظر نامے کا احاطہ نہیں کرتے، تو Android TimeInterpolator انٹرفیس کو لاگو کرکے ایک کسٹم انٹرپولیٹر بنانے کی اجازت دیتا ہے۔ واحد طریقہ getInterpolation(input: Float): Float ہے۔ Input 0 سے 1 تک موجودہ اینیمیشن پیشرفت ہے؛ output تبدیل شدہ قیمت ہے۔ Output زیادتی یا اچھال کے اثرات کے لیے [0,1] سے باہر جا سکتا ہے۔

عام کسٹم انٹرپولیٹر: مخفی اچھال اثر (1.0 سے اوپر جا کر واپس آنا)، لچک دار اثر (سائنوسائیڈل مخفی)، مرحلہ انٹرپولیٹر (الگ الگ چھلانگیں)۔ کسٹم انٹرپولیٹر <interpolator> ٹیگ اور کلاس کی وضاحت کرکے XML کے ذریعے بھی بیان کیے جا سکتے ہیں۔ Android Studio میں Layout Inspector میں ایک بلٹ ان Interpolator پیش نظارہ ہے — یہ منتخب کردہ انٹرپولیٹر کے لیے حقیقی منحنی دکھاتا ہے، ڈیبگنگ کو آسان بناتا ہے۔

Kotlin میں کوڈ کی مثالیں

مثال 1: ValueAnimator کے ساتھ AccelerateDecelerateInterpolator

ہم آہنگ انٹرپولیٹر استعمال کرتے ہوئے بنیادی بٹن اسکیل اینیمیشن۔ ValueAnimator قیمت کو 1.0 سے 1.2 اور واپس تبدیل کرتا ہے، اور AccelerateDecelerateInterpolator حرکت کو ہموار بناتا ہے۔

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 شروع میں ہموار تیزی اور آخر میں ہموار سستی پیدا کرتا ہے۔ REVERSE موڈ اینیمیشن کو مخالف سمت میں دہراتا ہے، ایک نبض اثر پیدا کرتا ہے۔ یہ پیٹرن ایکشن بٹن کے لیے استعمال ہوتا ہے، صارف کی توجہ کلیدی انٹرفیس عنصر کی طرف مبذول کراتا ہے۔

مثال 2: کسٹم منحنی کے ساتھ PathInterpolator

زیادتی اثر کے ساتھ کسٹم منحنی — شے ہدف کی پوزیشن سے 10% آگے نکل جاتی ہے اور واپس آتی ہے۔ کنٹرول پوائنٹس (0.4, 0.0, 0.6, 1.3) زیادتی کے ساتھ تیز رفتار داخلے کی وضاحت کرتے ہیں۔

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 مکعب Bezier منحنی کے ساتھ Path قبول کرتا ہے۔ مثال میں، عنصر ہدف کی پوزیشن (60% وقت پر y=1.3) سے آگے نکلتا ہے اور حتمی پوزیشن پر واپس آتا ہے۔ Path کو x محور کے ساتھ سختی سے یکسان ہونا چاہیے، ورنہ اینیمیشن پیچھے کی طرف چلے گی۔ تصدیق کے لیے، Android Studio میں Layout Inspector استعمال کریں۔

مثال 3: کسٹم BounceInterpolator

مخفی اچھال اثر کے ساتھ کسٹم انٹرپولیٹر۔ چار مخفی چکروں کے ساتھ TimeInterpolator کے ذریعے نفاذ۔

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

کسٹم DampedBounceInterpolator 0.85 کے مخفی گتانک کے ساتھ 4 مخفی اچھال پیدا کرتا ہے۔ getInterpolation طریقہ لکیری انپٹ لیتا ہے اور بہار کے اثر کے ساتھ قیمت لوٹاتا ہے۔ IT Sectr میں ہم اس انٹرپولیٹر کو نوٹیفکیشن ظاہر ہونے کی اینیمیشن کے لیے استعمال کرتے ہیں — اچھال طبعیت کا احساس پیدا کرتا ہے اور توجہ مبذول کراتا ہے۔