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

Compose को आज़माएं

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

Compose में अलग-अलग तरह के कॉन्टेंट के बीच ऐनिमेशन जोड़ना →

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

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

• ऐक्टिविटी में आने का ट्रांज़िशन तय करता है कि किसी ऐक्टिविटी में व्यू, सीन में कैसे आते हैं. उदाहरण के लिए, 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 ऑब्जेक्ट के साथ इन फ़ंक्शन को कॉल करें:

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()

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

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

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

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

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

Kotlin

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

Java

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

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

शेयर किए गए एलिमेंट के साथ कोई ऐक्टिविटी शुरू करना

ध्यान दें: एक जैसा कॉन्टेंट वाले कंपोज़ेबल के बीच ट्रांज़िशन करने के बारे में जानकारी पाने के लिए, Compose में शेयर किए गए एलिमेंट के ट्रांज़िशन देखें.

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

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"));