ऐनिमेशन का इस्तेमाल करके कोई गतिविधि शुरू करना

'लिखें' सुविधा आज़माएं
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर सुझाया जाता है. Compose में ऐनिमेशन इस्तेमाल करने का तरीका जानें.
लिखें में जाकर, अलग-अलग तरह के कॉन्टेंट के बीच ऐनिमेशन जोड़ें →

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

पहली इमेज. शेयर किए गए एलिमेंट वाला ट्रांज़िशन.

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

Android में, इन ट्रांज़िशन का इस्तेमाल किया जा सकता है:

  • explode: व्यू को सीन के बीच में या बाहर ले जाता है.
  • slide: इससे व्यू को सीन के किसी किनारे से अंदर या बाहर ले जाया जा सकता है.
  • fade: किसी व्यू की ऑपैसिटी बदलकर, उसे सीन में जोड़ता है या हटाता है.

Visibility क्लास को बड़ा करने वाला कोई भी ट्रांज़िशन, एंटर या एक्सिट ट्रांज़िशन के तौर पर काम करता है. ज़्यादा जानकारी के लिए, Transition क्लास के लिए एपीआई रेफ़रंस देखें.

Android, शेयर किए गए इन एलिमेंट के ट्रांज़िशन के साथ भी काम करता है:

  • changeBounds: टारगेट व्यू के लेआउट के बाउंड में हुए बदलावों को ऐनिमेशन के साथ दिखाता है.
  • changeClipBounds: टारगेट व्यू की क्लिप के बॉउंड में हुए बदलावों को ऐनिमेशन के साथ दिखाता है.
  • changeTransform: टारगेट व्यू के स्केल और रोटेशन में हुए बदलावों को ऐनिमेशन के साथ दिखाता है.
  • changeImageTransform: टारगेट इमेज के साइज़ और स्केल में होने वाले बदलावों को ऐनिमेशन के साथ दिखाता है.

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

दूसरी इमेज. शेयर किए गए एक एलिमेंट वाला सीन ट्रांज़िशन.

शेयर किए गए एलिमेंट का इस्तेमाल करके, एक ऐक्टिविटी से दूसरी ऐक्टिविटी पर जाने के लिए ऐनिमेशन बनाने वाले सैंपल कोड के लिए, ActivitySceneTransitionBasic देखें.

सिस्टम का वर्शन देखना

गतिविधि ट्रांज़िशन एपीआई, Android 5.0 (एपीआई 21) और उसके बाद के वर्शन पर उपलब्ध हैं. Android के पुराने वर्शन के साथ काम करने के लिए, इनमें से किसी भी सुविधा के लिए एपीआई का इस्तेमाल करने से पहले, रनटाइम पर सिस्टम version देखें:

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

कस्टम ट्रांज़िशन तय करना

सबसे पहले, Material थीम से इनहेरिट की गई स्टाइल तय करते समय, android:windowActivityTransitions एट्रिब्यूट की मदद से विंडो कॉन्टेंट ट्रांज़िशन चालू करें. स्टाइल की परिभाषा में, एलिमेंट के दिखने, छिपने, और शेयर किए जाने के ट्रांज़िशन की जानकारी भी दी जा सकती है:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

इस उदाहरण में change_image_transform ट्रांज़िशन को इस तरह परिभाषित किया गया है:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

changeImageTransform एलिमेंट, ChangeImageTransform क्लास से जुड़ा है. ज़्यादा जानकारी के लिए, Transition के लिए एपीआई रेफ़रंस देखें.

इसके बजाय, अपने कोड में विंडो कॉन्टेंट ट्रांज़िशन की सुविधा चालू करने के लिए, Window.requestFeature() फ़ंक्शन को कॉल करें:

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

अपने कोड में ट्रांज़िशन तय करने के लिए, इन फ़ंक्शन को Transition ऑब्जेक्ट के साथ कॉल करें:

setExitTransition() और setSharedElementExitTransition() फ़ंक्शन, कॉल करने की गतिविधि के लिए बाहर निकलने के ट्रांज़िशन की जानकारी देते हैं. setEnterTransition() और setSharedElementEnterTransition() फ़ंक्शन, कॉल की गई गतिविधि के लिए एंटर ट्रांज़िशन तय करते हैं.

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

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

ट्रांज़िशन का इस्तेमाल करके कोई गतिविधि शुरू करना

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

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

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

शेयर किए गए एलिमेंट की मदद से कोई गतिविधि शुरू करना

एक ही एलिमेंट वाली दो गतिविधियों के बीच स्क्रीन ट्रांज़िशन ऐनिमेशन बनाने के लिए, ये काम करें:

  1. अपनी थीम में, विंडो के कॉन्टेंट के ट्रांज़िशन की सुविधा चालू करें.
  2. अपनी स्टाइल में, शेयर किए गए एलिमेंट का ट्रांज़िशन तय करें.
  3. अपने ट्रांज़िशन को एक्सएमएल संसाधन के तौर पर तय करें.
  4. android:transitionName एट्रिब्यूट की मदद से, दोनों लेआउट में शेयर किए गए एलिमेंट को एक ही नाम असाइन करें.
  5. ActivityOptions.makeSceneTransitionAnimation() फ़ंक्शन का इस्तेमाल करें.

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

अपने कोड में जनरेट किए गए शेयर किए गए डाइनैमिक व्यू के लिए, दोनों गतिविधियों में एक ही एलिमेंट का नाम बताने के लिए, View.setTransitionName() फ़ंक्शन का इस्तेमाल करें.

दूसरी गतिविधि पूरी होने पर, सीन ट्रांज़िशन ऐनिमेशन को उलटने के लिए, Activity.finish() के बजाय Activity.finishAfterTransition() फ़ंक्शन को कॉल करें.

शेयर किए गए कई एलिमेंट की मदद से कोई गतिविधि शुरू करना

एक से ज़्यादा शेयर किए गए एलिमेंट वाली दो गतिविधियों के बीच सीन ट्रांज़िशन ऐनिमेशन बनाने के लिए, दोनों लेआउट में शेयर किए गए एलिमेंट को android:transitionName एट्रिब्यूट की मदद से तय करें. इसके अलावा, दोनों गतिविधियों में View.setTransitionName() फ़ंक्शन का इस्तेमाल करें. इसके बाद, यहां बताए गए तरीके से ActivityOptions ऑब्जेक्ट बनाएं:

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));