Interpolator — এটি কী, Android-এ ইন্টারপোলেশন বক্ররেখা

Interpolator কী?

Interpolator — Android-এর একটি ইন্টারফেস যা অ্যানিমেশন অগ্রগতির ভগ্নাংশ মান (0.0 থেকে 1.0)কে পরিবর্তিত গতি সহ প্রকৃত মানে ম্যাপ করে। যদি একটি অ্যানিমেশন 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 ইজিং ফাংশনের মতো। 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-এ আমরা প্রতিটি ডিজাইন সিস্টেমের জন্য কাস্টম PathInterpolators তৈরি করি — এটি সমস্ত স্ক্রিনে ধারাবাহিক অ্যানিমেশন নিশ্চিত করে।

নিজের 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-এ আমরা নোটিফিকেশন উপস্থিতি অ্যানিমেশনের জন্য এই ইন্টারপোলেটর ব্যবহার করি — বাউন্স ভৌততার অনুভূতি তৈরি করে এবং মনোযোগ আকর্ষণ করে।