Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

ट्रांज़िशन का इस्तेमाल करके, लेआउट में बदलावों को ऐनिमेट करें

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

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

ट्रांज़िशन फ़्रेमवर्क में ये सुविधाएं शामिल हैं:

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

दो लेआउट के बीच ऐनिमेशन बनाने की बुनियादी प्रोसेस यहां दी गई है:

शुरू और खत्म होने वाले लेआउट के लिए, Scene ऑब्जेक्ट बनाएं. हालांकि, शुरुआती लेआउट का सीन अक्सर मौजूदा लेआउट से अपने-आप तय हो जाता है.
आपको किस तरह का ऐनिमेशन चाहिए, यह तय करने के लिए Transition ऑब्जेक्ट बनाएं.
TransitionManager.go() को कॉल करें. इसके बाद, सिस्टम लेआउट बदलने के लिए ऐनिमेशन चलाता है.

पहली इमेज में दिए गए डायग्राम में, आपके लेआउट, सीन, ट्रांज़िशन, और फ़ाइनल ऐनिमेशन के बीच का संबंध दिखाया गया है.

पहली इमेज. ट्रांज़िशन फ़्रेमवर्क, ऐनिमेशन कैसे बनाता है, इसका बुनियादी इलस्ट्रेशन.

कोई सीन बनाना

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

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

कोई सीन, अपनी कार्रवाइयां भी तय कर सकता है. ये कार्रवाइयां तब चलती हैं, जब सीन में बदलाव किया जाता है. यह सुविधा, किसी सीन पर ट्रांज़िशन करने के बाद व्यू सेटिंग को हटाने के लिए काम की है.

लेआउट रिसॉर्स से कोई सीन बनाना

लेआउट रिसॉर्स फ़ाइल से सीधे Scene इंस्टेंस बनाया जा सकता है. इस तकनीक का इस्तेमाल तब करें, जब फ़ाइल में व्यू हैरारकी ज़्यादातर स्टैटिक हो. इसके बाद दिखने वाला सीन, व्यू हैरारकी की उस स्थिति को दिखाता है जब आपने Scene इंस्टेंस बनाया था. व्यू हैरारकी बदलने पर, सीन को फिर से बनाएं. फ़्रेमवर्क, फ़ाइल में मौजूद पूरे व्यू हायरार्की से सीन बनाता है. लेआउट फ़ाइल के किसी हिस्से से सीन नहीं बनाया जा सकता.

लेआउट रिसॉर्स फ़ाइल से Scene इंस्टेंस बनाने के लिए, अपने लेआउट से सीन रूट को ViewGroup के तौर पर वापस पाएं. इसके बाद, सीन रूट और लेआउट फ़ाइल के संसाधन आईडी के साथ Scene.getSceneForLayout() फ़ंक्शन को कॉल करें. इस लेआउट फ़ाइल में सीन के लिए व्यू हैरारकी होती है.

सीन के लिए लेआउट तय करना

इस सेक्शन के बाकी कोड स्निपेट में, एक ही सीन रूट एलिमेंट का इस्तेमाल करके दो अलग-अलग सीन बनाने का तरीका बताया गया है. स्निपेट से यह भी पता चलता है कि एक-दूसरे से जुड़े न होने पर भी, कई Scene ऑब्जेक्ट लोड किए जा सकते हैं.

इस उदाहरण में, लेआउट की ये परिभाषाएं शामिल हैं:

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

इस उदाहरण को इस तरह से डिज़ाइन किया गया है कि ऐनिमेशन, गतिविधि के मुख्य लेआउट के चाइल्ड लेआउट में होता है. मुख्य लेआउट में मौजूद टेक्स्ट लेबल स्टैटिक रहता है.

गतिविधि के मुख्य लेआउट को इस तरह से तय किया जाता है:

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

इस लेआउट की परिभाषा में, एक टेक्स्ट फ़ील्ड और सीन रूट के लिए एक चाइल्ड FrameLayout शामिल है. पहले सीन का लेआउट, मुख्य लेआउट फ़ाइल में शामिल होता है. इससे ऐप्लिकेशन, इसे शुरुआती यूज़र इंटरफ़ेस के हिस्से के तौर पर दिखा पाता है. साथ ही, इसे किसी सीन में लोड भी कर पाता है. ऐसा इसलिए, क्योंकि फ़्रेमवर्क सिर्फ़ पूरी लेआउट फ़ाइल को किसी सीन में लोड कर सकता है.

पहले सीन का लेआउट इस तरह तय किया गया है:

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toBottomOf="@id/text_view1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

दूसरे सीन के लेआउट में, एक ही आईडी वाले दो टेक्स्ट फ़ील्ड हैं. हालांकि, इन्हें अलग क्रम में रखा गया है. इसे इस तरह से परिभाषित किया गया है:

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toBottomOf="@id/text_view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

लेआउट से सीन जनरेट करना

दोनों कंस्ट्रेंट लेआउट के लिए परिभाषाएं बनाने के बाद, आपको हर लेआउट के लिए एक सीन मिल सकता है. इससे आपको दोनों यूज़र इंटरफ़ेस (यूआई) कॉन्फ़िगरेशन के बीच ट्रांज़िशन करने में मदद मिलती है. किसी सीन को पाने के लिए, आपको सीन के रूट और लेआउट रिसॉर्स आईडी का रेफ़रंस चाहिए.

यहां दिए गए कोड स्निपेट में, सीन रूट का रेफ़रंस पाने और लेआउट फ़ाइलों से दो Scene ऑब्जेक्ट बनाने का तरीका बताया गया है:

Kotlin

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

Java

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

ऐप्लिकेशन में, अब व्यू हायरार्की के आधार पर दो Scene ऑब्जेक्ट हैं. दोनों सीन, res/layout/activity_main.xml में FrameLayout एलिमेंट से तय किए गए सीन रूट का इस्तेमाल करते हैं.

अपने कोड में कोई सीन बनाना

ViewGroup ऑब्जेक्ट से, अपने कोड में Scene इंस्टेंस भी बनाया जा सकता है. इस तकनीक का इस्तेमाल तब करें, जब आपको व्यू के क्रम में सीधे तौर पर अपने कोड में बदलाव करना हो या उन्हें डाइनैमिक तौर पर जनरेट करना हो.

अपने कोड में व्यू हैरारकी से सीन बनाने के लिए, Scene(sceneRoot, viewHierarchy) कंस्ट्रक्टर का इस्तेमाल करें. इस कंस्ट्रक्टर को कॉल करना, Scene.getSceneForLayout() फ़ंक्शन को कॉल करने के बराबर है. ऐसा तब होता है, जब आपने पहले से ही लेआउट फ़ाइल को बड़ा कर दिया हो.

यहां दिए गए कोड स्निपेट में, सीन के रूट एलिमेंट और सीन के व्यू हाइरार्की से Scene इंस्टेंस बनाने का तरीका बताया गया है:

Kotlin

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

Java

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

सीन के लिए कार्रवाइयाँ बनाना

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

सीन ऐक्शन, इन मामलों को हैंडल करने के लिए काम के होते हैं:

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

कस्टम सीन ऐक्शन देने के लिए, अपने ऐक्शन को Runnable ऑब्जेक्ट के तौर पर तय करें और उन्हें Scene.setExitAction() या Scene.setEnterAction() फ़ंक्शन में पास करें. फ़्रेमवर्क, ट्रांज़िशन ऐनिमेशन चलाने से पहले शुरुआती सीन पर setExitAction() फ़ंक्शन को कॉल करता है. साथ ही, ट्रांज़िशन ऐनिमेशन चलाने के बाद, आखिरी सीन पर setEnterAction() फ़ंक्शन को कॉल करता है.

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

ट्रांज़िशन फ़्रेमवर्क, Transition ऑब्जेक्ट के साथ सीन के बीच ऐनिमेशन की स्टाइल को दिखाता है. Transition को AutoTransition और Fade जैसी बिल्ट-इन सबक्लास का इस्तेमाल करके इंस्टैंशिएट किया जा सकता है. इसके अलावा, अपना ट्रांज़िशन तय किया जा सकता है. इसके बाद, अपने आखिरी Scene और Transition को TransitionManager.go() पर पास करके, सीन के बीच ऐनिमेशन चलाया जा सकता है.

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

ट्रांज़िशन बनाना

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

पहली टेबल. पहले से मौजूद ट्रांज़िशन टाइप.

कक्षा	टैग	प्रभाव
`AutoTransition`	`<autoTransition/>`	डिफ़ॉल्ट ट्रांज़िशन. यह क्रम से व्यू को धुंधला करता है, उन्हें एक जगह से दूसरी जगह ले जाता है, और उनका साइज़ बदलता है.
`ChangeBounds`	`<changeBounds/>`	इससे व्यू को मूव किया जा सकता है और उनका साइज़ बदला जा सकता है.
`ChangeClipBounds`	`<changeClipBounds/>`	यह सीन में बदलाव से पहले और बाद की `View.getClipBounds()` कैप्चर करता है. साथ ही, ट्रांज़िशन के दौरान उन बदलावों को ऐनिमेट करता है.
`ChangeImageTransform`	`<changeImageTransform/>`	यह सीन में बदलाव से पहले और बाद में, `ImageView` के मैट्रिक्स को कैप्चर करता है. साथ ही, ट्रांज़िशन के दौरान इसे ऐनिमेट करता है.
`ChangeScroll`	`<changeScroll/>`	यह कुकी, सीन में बदलाव से पहले और बाद में टारगेट की स्क्रोल प्रॉपर्टी को कैप्चर करती है. साथ ही, किसी भी बदलाव को ऐनिमेट करती है.
`ChangeTransform`	`<changeTransform/>`	यह सीन में बदलाव से पहले और बाद में, व्यू के स्केल और रोटेशन को कैप्चर करता है. साथ ही, ट्रांज़िशन के दौरान इन बदलावों को ऐनिमेट करता है.
`Explode`	`<explode/>`	यह ट्रैक करता है कि शुरुआती और आखिरी सीन में टारगेट व्यू की विज़िबिलिटी में क्या बदलाव हुए हैं. साथ ही, सीन के किनारों से व्यू को अंदर या बाहर ले जाता है.
`Fade`	`<fade/>`	`fade_in` व्यू में फ़ेड इन होता है. `fade_out` व्यू को फ़ेड आउट करता है. `fade_in_out` (डिफ़ॉल्ट) `fade_out` करता है. इसके बाद, `fade_in` करता है.
`Slide`	`<slide/>`	यह सुविधा, वीडियो के शुरू और आखिर के सीन में टारगेट व्यू के दिखने की सेटिंग में बदलावों को ट्रैक करती है. साथ ही, सीन के किसी एक किनारे से व्यू को अंदर या बाहर ले जाती है.

किसी संसाधन फ़ाइल से ट्रांज़िशन इंस्टेंस बनाना

इस तकनीक की मदद से, अपनी गतिविधि के कोड में बदलाव किए बिना, ट्रांज़िशन की परिभाषा में बदलाव किया जा सकता है. यह तकनीक, ट्रांज़िशन की जटिल परिभाषाओं को आपके ऐप्लिकेशन कोड से अलग करने के लिए भी काम आती है. इसके बारे में एक से ज़्यादा ट्रांज़िशन तय करना सेक्शन में बताया गया है.

किसी संसाधन फ़ाइल में बिल्ट-इन ट्रांज़िशन तय करने के लिए, यह तरीका अपनाएं:

अपने प्रोजेक्ट में res/transition/ डायरेक्ट्री जोड़ें.
इस डायरेक्ट्री में एक नई एक्सएमएल रिसॉर्स फ़ाइल बनाएं.
पहले से मौजूद किसी ट्रांज़िशन के लिए, एक एक्सएमएल नोड जोड़ें.

उदाहरण के लिए, यहां दी गई संसाधन फ़ाइल में Fade ट्रांज़िशन के बारे में बताया गया है:

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

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

Kotlin

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

Java

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

अपने कोड में ट्रांज़िशन इंस्टेंस बनाना

अगर आपको अपने कोड में यूज़र इंटरफ़ेस में बदलाव करना है, तो यह तकनीक ट्रांज़िशन ऑब्जेक्ट को डाइनैमिक तरीके से बनाने के लिए काम की है. साथ ही, यह कुछ या बिना पैरामीटर वाले आसान बिल्ट-इन ट्रांज़िशन इंस्टेंस बनाने के लिए भी काम की है.

पहले से मौजूद ट्रांज़िशन का इंस्टेंस बनाने के लिए, Transition क्लास की सबक्लास में से किसी एक पब्लिक कंस्ट्रक्टर को लागू करें. उदाहरण के लिए, नीचे दिया गया कोड स्निपेट, Fade ट्रांज़िशन का एक इंस्टेंस बनाता है:

Kotlin

var fadeTransition: Transition = Fade()

Java

Transition fadeTransition = new Fade();

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

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

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

Kotlin

TransitionManager.go(endingScene, fadeTransition)

Java

TransitionManager.go(endingScene, fadeTransition);

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

अगर ट्रांज़िशन इंस्टेंस तय नहीं किया जाता है, तो ट्रांज़िशन मैनेजर अपने-आप ट्रांज़िशन लागू कर सकता है. यह ट्रांज़िशन, ज़्यादातर स्थितियों में सही तरीके से काम करता है. ज़्यादा जानकारी के लिए, TransitionManager क्लास के लिए एपीआई का संदर्भ देखें.

टारगेट व्यू की संख्या चुनें

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

ट्रांज़िशन के दौरान ऐनिमेशन वाले हर व्यू को टारगेट कहा जाता है. सिर्फ़ उन टारगेट को चुना जा सकता है जो किसी सीन से जुड़ी व्यू हैरारकी का हिस्सा हैं.

टारगेट की सूची से एक या उससे ज़्यादा व्यू हटाने के लिए, ट्रांज़िशन शुरू करने से पहले removeTarget() तरीके को कॉल करें. अगर आपको टारगेट की सूची में सिर्फ़ वे व्यू जोड़ने हैं जिन्हें आपने तय किया है, तो addTarget() फ़ंक्शन को कॉल करें. ज़्यादा जानकारी के लिए, Transition क्लास का एपीआई रेफ़रंस देखें.

एक से ज़्यादा ट्रांज़िशन तय करना

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

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

एक्सएमएल में ट्रांज़िशन के कलेक्शन से ट्रांज़िशन सेट तय करने के लिए, res/transitions/ डायरेक्ट्री में एक संसाधन फ़ाइल बनाएं. इसके बाद, TransitionSet एलिमेंट में ट्रांज़िशन की सूची बनाएं. उदाहरण के लिए, यहां दिए गए स्निपेट में, ट्रांज़िशन सेट को तय करने का तरीका बताया गया है. यह AutoTransition क्लास की तरह ही काम करता है:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

अपने कोड में ट्रांज़िशन सेट को TransitionSet ऑब्जेक्ट में बदलने के लिए, अपनी गतिविधि में TransitionInflater.from() फ़ंक्शन को कॉल करें. TransitionSet क्लास, Transition क्लास से एक्सटेंड होती है. इसलिए, इसका इस्तेमाल ट्रांज़िशन मैनेजर के साथ किया जा सकता है. ठीक वैसे ही जैसे किसी अन्य Transition इंस्टेंस का इस्तेमाल किया जाता है.

सीन के बिना ट्रांज़िशन लागू करना

व्यू के क्रम में बदलाव करना, यूज़र इंटरफ़ेस में बदलाव करने का एकमात्र तरीका नहीं है. मौजूदा क्रम में, बच्चों के व्यू जोड़कर, उनमें बदलाव करके, और उन्हें हटाकर भी बदलाव किए जा सकते हैं.

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

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

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

एक ही व्यू हैरारकी में ट्रांज़िशन में देरी करने के लिए, यह तरीका अपनाएं:

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

इस उदाहरण में, डिलेड ट्रांज़िशन का इस्तेमाल करके, व्यू हाइरार्की में टेक्स्ट व्यू जोड़ने के ऐनिमेशन का तरीका दिखाया गया है. पहले स्निपेट में, लेआउट की परिभाषा वाली फ़ाइल दिखाई गई है:

res/layout/activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

अगले स्निपेट में, टेक्स्ट व्यू को जोड़ने के लिए ऐनिमेशन वाले कोड को दिखाया गया है:

MainActivity

Kotlin

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

Java

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

ट्रांज़िशन लाइफ़साइकल कॉलबैक तय करना

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

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

ज़्यादा जानकारी के लिए, TransitionListener क्लास का एपीआई रेफ़रंस देखें.

सीमाएं

इस सेक्शन में, ट्रांज़िशन फ़्रेमवर्क की कुछ ज्ञात सीमाओं के बारे में बताया गया है:

ऐसा हो सकता है कि SurfaceView पर लागू किए गए ऐनिमेशन सही तरीके से न दिखें. SurfaceView इंस्टेंस, यूज़र इंटरफ़ेस (यूआई) थ्रेड से अपडेट नहीं किए जाते. इसलिए, हो सकता है कि अपडेट, अन्य व्यू के ऐनिमेशन के साथ सिंक न हों.
ऐसा हो सकता है कि कुछ खास तरह के ट्रांज़िशन, TextureView पर लागू होने के बाद, मनचाहा ऐनिमेशन इफ़ेक्ट न दें.
AdapterView जैसी एक्सटेंड की गई क्लास, ListView, अपने चाइल्ड व्यू को इस तरह से मैनेज करती हैं कि वे ट्रांज़िशन फ़्रेमवर्क के साथ काम नहीं करतीं. AdapterView के आधार पर बनाए गए व्यू को ऐनिमेट करने पर, डिवाइस का डिसप्ले काम करना बंद कर सकता है.
अगर किसी TextView का साइज़ बदलने की कोशिश की जाती है, तो ऑब्जेक्ट का साइज़ पूरी तरह से बदलने से पहले टेक्स्ट नई जगह पर दिखता है. इस समस्या से बचने के लिए, टेक्स्ट वाले व्यू के साइज़ में बदलाव करते समय ऐनिमेशन का इस्तेमाल न करें.