कस्टम ट्रांज़िशन ऐनिमेशन बनाएं

Compose को आज़माएं

Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर इस्तेमाल करने का सुझाव दिया जाता है. Compose में ऐनिमेशन जोड़ने का तरीका जानें.

Compose में ट्रांज़िशन के साथ कई प्रॉपर्टी जोड़ना →

कस्टम ट्रांज़िशन की मदद से, ऐसा ऐनिमेशन बनाया जा सकता है जो ट्रांज़िशन की किसी भी इन-बिल्ट क्लास में उपलब्ध नहीं है. उदाहरण के लिए, कस्टम ट्रांज़िशन तय किया जा सकता है. इससे नई स्क्रीन पर, टेक्स्ट और इनपुट फ़ील्ड के फ़ोरग्राउंड का रंग बदलकर ग्रे हो जाता है. इससे पता चलता है कि फ़ील्ड बंद हैं. इस तरह के बदलाव से, उपयोगकर्ताओं को बंद किए गए फ़ील्ड दिखते हैं.

कस्टम ट्रांज़िशन, ट्रांज़िशन के इन-बिल्ट टाइप की तरह ही, शुरू और खत्म होने वाले सीन, दोनों के चाइल्ड व्यू पर ऐनिमेशन लागू करता है. हालांकि, ट्रांज़िशन के इन-बिल्ट टाइप के उलट, आपको ऐसा कोड देना होता है जो प्रॉपर्टी वैल्यू कैप्चर करता है और ऐनिमेशन जनरेट करता है. आपके पास अपने ऐनिमेशन के लिए, टारगेट व्यू का सबसेट तय करने का विकल्प भी होता है.

इस पेज पर, कस्टम ट्रांज़िशन बनाने के लिए, प्रॉपर्टी वैल्यू कैप्चर करने और ऐनिमेशन जनरेट करने का तरीका बताया गया है.

ट्रांज़िशन क्लास को बढ़ाना

कस्टम ट्रांज़िशन बनाने के लिए, अपने प्रोजेक्ट में एक क्लास जोड़ें. यह क्लास, Transition क्लास को बढ़ाती है. साथ ही, नीचे दिए गए स्निपेट में दिखाए गए फ़ंक्शन को ओवरराइड करती है:

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

इन सेक्शन में, इन फ़ंक्शन को ओवरराइड करने का तरीका बताया गया है.

व्यू प्रॉपर्टी की वैल्यू कैप्चर करना

ट्रांज़िशन ऐनिमेशन, प्रॉपर्टी ऐनिमेशन सिस्टम का इस्तेमाल करते हैं. इसके बारे में, प्रॉपर्टी ऐनिमेशन की खास जानकारी में बताया गया है. प्रॉपर्टी ऐनिमेशन, तय समय में किसी व्यू प्रॉपर्टी को शुरुआती वैल्यू से आखिरी वैल्यू में बदलता है. इसलिए, फ़्रेमवर्क को ऐनिमेशन बनाने के लिए, प्रॉपर्टी की शुरुआती और आखिरी, दोनों वैल्यू की ज़रूरत होती है.

हालांकि, प्रॉपर्टी ऐनिमेशन को आम तौर पर, व्यू की सभी प्रॉपर्टी वैल्यू के सिर्फ़ एक छोटे सबसेट की ज़रूरत होती है. उदाहरण के लिए, कलर ऐनिमेशन के लिए, कलर प्रॉपर्टी वैल्यू की ज़रूरत होती है. वहीं, मूवमेंट ऐनिमेशन के लिए, पोज़िशन प्रॉपर्टी वैल्यू की ज़रूरत होती है. किसी ऐनिमेशन के लिए ज़रूरी प्रॉपर्टी वैल्यू, ट्रांज़िशन के हिसाब से अलग-अलग होती हैं. इसलिए, ट्रांज़िशन फ़्रेमवर्क, ट्रांज़िशन को हर प्रॉपर्टी वैल्यू उपलब्ध नहीं कराता. इसके बजाय, फ़्रेमवर्क, कॉलबैक फ़ंक्शन को लागू करता है. इससे ट्रांज़िशन, सिर्फ़ उन प्रॉपर्टी वैल्यू को कैप्चर कर पाता है जिनकी उसे ज़रूरत होती है. साथ ही, उन्हें फ़्रेमवर्क में सेव कर पाता है.

शुरुआती वैल्यू कैप्चर करना

फ़्रेमवर्क को शुरुआती व्यू वैल्यू पास करने के लिए, captureStartValues(transitionValues) फ़ंक्शन लागू करें. फ़्रेमवर्क, शुरुआती सीन में मौजूद हर व्यू के लिए इस फ़ंक्शन को कॉल करता है. फ़ंक्शन का आर्ग्युमेंट, TransitionValues ऑब्जेक्ट होता है. इसमें व्यू का रेफ़रंस और Map इंस्टेंस होता है. इसमें, अपनी पसंद के मुताबिक व्यू वैल्यू सेव की जा सकती हैं. अपने लागू करने के तरीके में, इन प्रॉपर्टी वैल्यू को वापस पाएं और उन्हें मैप में सेव करके, फ़्रेमवर्क को वापस पास करें.

यह पक्का करने के लिए कि किसी प्रॉपर्टी वैल्यू की कुंजी, अन्य TransitionValues कुंजियों से न टकराए, इस नेमिंग स्कीम का इस्तेमाल करें:

package_name:transition_name:property_name

नीचे दिए गए स्निपेट में, captureStartValues() फ़ंक्शन को लागू करने का तरीका दिखाया गया है:

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

आखिरी वैल्यू कैप्चर करना

फ़्रेमवर्क, खत्म होने वाले सीन में मौजूद हर टारगेट व्यू के लिए, captureEndValues(TransitionValues) फ़ंक्शन को एक बार कॉल करता है. अन्य सभी मामलों में, captureEndValues(), captureStartValues() की तरह ही काम करता है.

नीचे दिए गए कोड स्निपेट में, captureEndValues() फ़ंक्शन को लागू करने का तरीका दिखाया गया है:

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

इस उदाहरण में, captureStartValues() और captureEndValues() दोनों फ़ंक्शन, वैल्यू वापस पाने और सेव करने के लिए, captureValues() को लागू करते हैं. captureValues() जिस व्यू प्रॉपर्टी को वापस पाता है वह एक ही होती है. हालांकि, शुरुआती और खत्म होने वाले सीन में इसकी वैल्यू अलग-अलग होती हैं. फ़्रेमवर्क, किसी व्यू की शुरुआती और खत्म होने वाली स्थितियों के लिए अलग-अलग मैप बनाए रखता है.

कस्टम ऐनिमेटर बनाना

createAnimator() फ़ंक्शन को ओवरराइड करके, ऐनिमेटर उपलब्ध कराएं. इससे, शुरुआती सीन में मौजूद व्यू की स्थिति और खत्म होने वाले सीन में मौजूद व्यू की स्थिति के बीच होने वाले बदलावों को ऐनिमेट किया जा सकता है. जब फ़्रेमवर्क इस फ़ंक्शन को कॉल करता है, तो यह सीन रूट व्यू और TransitionValues ऑब्जेक्ट पास करता है. इनमें, कैप्चर की गई शुरुआती और आखिरी वैल्यू शामिल होती हैं.

फ़्रेमवर्क, createAnimator() फ़ंक्शन को कितनी बार कॉल करता है, यह शुरुआती और खत्म होने वाले सीन के बीच होने वाले बदलावों पर निर्भर करता है.

उदाहरण के लिए, फ़ेड-आउट या फ़ेड-इन ऐनिमेशन को कस्टम ट्रांज़िशन के तौर पर लागू करने पर विचार करें. अगर शुरुआती सीन में पांच टारगेट हैं, जिनमें से दो को खत्म होने वाले सीन से हटा दिया गया है. साथ ही, खत्म होने वाले सीन में शुरुआती सीन के तीन टारगेट के अलावा, एक नया टारगेट है, तो फ़्रेमवर्क, createAnimator() को छह बार कॉल करता है. कॉल में से तीन, उन टारगेट के फ़ेड-आउट और फ़ेड-इन को ऐनिमेट करते हैं जो दोनों सीन ऑब्जेक्ट में मौजूद हैं. दो और कॉल, खत्म होने वाले सीन से हटाए गए टारगेट के फ़ेड-आउट को ऐनिमेट करते हैं. एक कॉल, खत्म होने वाले सीन में मौजूद नए टारगेट के फ़ेड-इन को ऐनिमेट करता है.

शुरुआती और खत्म होने वाले, दोनों सीन में मौजूद टारगेट व्यू के लिए, फ़्रेमवर्क, startValues और endValues दोनों आर्ग्युमेंट के लिए, TransitionValues ऑब्जेक्ट उपलब्ध कराता है. सिर्फ़ शुरुआती या खत्म होने वाले सीन में मौजूद टारगेट व्यू के लिए, फ़्रेमवर्क, संबंधित आर्ग्युमेंट के लिए, TransitionValues ऑब्जेक्ट उपलब्ध कराता है. साथ ही, दूसरे के लिए null उपलब्ध कराता है.

कस्टम ट्रांज़िशन बनाते समय, createAnimator(ViewGroup, TransitionValues, TransitionValues) फ़ंक्शन को लागू करने के लिए, कैप्चर की गई व्यू प्रॉपर्टी वैल्यू का इस्तेमाल करके, Animator ऑब्जेक्ट बनाएं और उसे फ़्रेमवर्क को वापस करें. लागू करने के तरीके का उदाहरण देखने के लिए, ChangeColor क्लास देखें जो CustomTransition सैंपल में मौजूद है. प्रॉपर्टी ऐनिमेटर के बारे में ज़्यादा जानने के लिए, प्रॉपर्टी ऐनिमेशन देखें.

कस्टम ट्रांज़िशन लागू करना

कस्टम ट्रांज़िशन, इन-बिल्ट ट्रांज़िशन की तरह ही काम करते हैं. ट्रांज़िशन लागू करें में बताए गए तरीके के मुताबिक, ट्रांज़िशन मैनेजर का इस्तेमाल करके, कस्टम ट्रांज़िशन लागू किया जा सकता है.