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 में हम इस इंटरपोलेटर का उपयोग सूचना उपस्थिति एनिमेशन के लिए करते हैं — उछाल भौतिकता की भावना पैदा करता है और ध्यान आकर्षित करता है।