एक डेस्टिनेशन से दूसरे डेस्टिनेशन पर जाने के दौरान ऐनिमेशन दिखाना

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

डिफ़ॉल्ट ट्रांज़िशन बदलना

NavDisplay, नेविगेशन के दौरान कॉन्टेंट के ऐनिमेशन के तरीके को तय करने के लिए ContentTransform का इस्तेमाल करता है. NavDisplay में ट्रांज़िशन पैरामीटर देकर, ऐनिमेशन के डिफ़ॉल्ट व्यवहार को बदला जा सकता है.

  • transitionSpec: यह पैरामीटर, ContentTransform को लागू करने के बारे में बताता है.यह तब लागू होता है, जब बैक स्टैक में कॉन्टेंट जोड़ा जाता है. इसका मतलब है कि आगे नेविगेट करते समय.
  • popTransitionSpec: यह पैरामीटर, बैक स्टैक से कॉन्टेंट हटाने (यानी, वापस जाने पर) के बाद लागू होने वाला ContentTransform तय करता है.
  • predictivePopTransitionSpec: यह पैरामीटर, ContentTransform को तय करता है. यह तब लागू होता है, जब अनुमानित बैक जेस्चर का इस्तेमाल करके कॉन्टेंट पॉप किया जाता है.

हर NavEntry लेवल पर ट्रांज़िशन को बदलना

NavEntry के मेटाडेटा का इस्तेमाल करके, उनके लिए कस्टम ऐनिमेशन भी तय किए जा सकते हैं. NavDisplay, हर एंट्री के लिए ट्रांज़िशन लागू करने के लिए, खास मेटाडेटा कुंजियों को पहचानता है:

  • NavDisplay.transitionSpec: फ़ॉरवर्ड नेविगेशन ऐनिमेशन तय करने के लिए, इस हेल्पर फ़ंक्शन का इस्तेमाल करें.
  • NavDisplay.popTransitionSpec: किसी खास NavEntry के लिए, पीछे की ओर नेविगेट करने का ऐनिमेशन तय करने के लिए, इस हेल्पर फ़ंक्शन का इस्तेमाल करें.
  • NavDisplay.predictivePopTransitionSpec: किसी खास NavEntry के लिए, अनुमानित बैक जेस्चर के ऐनिमेशन को तय करने के लिए, इस हेल्पर फ़ंक्शन का इस्तेमाल करें.

हर एंट्री के लिए मेटाडेटा ट्रांज़िशन, एक ही नाम के NavDisplay के ग्लोबल ट्रांज़िशन को बदल देते हैं.

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

@Serializable
data object ScreenA : NavKey

@Serializable
data object ScreenB : NavKey

@Serializable
data object ScreenC : NavKey

class AnimatedNavDisplayActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            Scaffold { paddingValues ->

                val backStack = rememberNavBackStack(ScreenA)

                NavDisplay(
                    backStack = backStack,
                    onBack = { backStack.removeLastOrNull() },
                    entryProvider = entryProvider {
                        entry<ScreenA> {
                            ContentOrange("This is Screen A") {
                                Button(onClick = { backStack.add(ScreenB) }) {
                                    Text("Go to Screen B")
                                }
                            }
                        }
                        entry<ScreenB> {
                            ContentMauve("This is Screen B") {
                                Button(onClick = { backStack.add(ScreenC) }) {
                                    Text("Go to Screen C")
                                }
                            }
                        }
                        entry<ScreenC>(
                            metadata = NavDisplay.transitionSpec {
                                // Slide new content up, keeping the old content in place underneath
                                slideInVertically(
                                    initialOffsetY = { it },
                                    animationSpec = tween(1000)
                                ) togetherWith ExitTransition.KeepUntilTransitionsFinished
                            } + NavDisplay.popTransitionSpec {
                                // Slide old content down, revealing the new content in place underneath
                                EnterTransition.None togetherWith
                                    slideOutVertically(
                                        targetOffsetY = { it },
                                        animationSpec = tween(1000)
                                    )
                            } + NavDisplay.predictivePopTransitionSpec {
                                // Slide old content down, revealing the new content in place underneath
                                EnterTransition.None togetherWith
                                    slideOutVertically(
                                        targetOffsetY = { it },
                                        animationSpec = tween(1000)
                                    )
                            }
                        ) {
                            ContentGreen("This is Screen C")
                        }
                    },
                    transitionSpec = {
                        // Slide in from right when navigating forward
                        slideInHorizontally(initialOffsetX = { it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { -it })
                    },
                    popTransitionSpec = {
                        // Slide in from left when navigating back
                        slideInHorizontally(initialOffsetX = { -it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { it })
                    },
                    predictivePopTransitionSpec = {
                        // Slide in from left when navigating back
                        slideInHorizontally(initialOffsetX = { -it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { it })
                    },
                    modifier = Modifier.padding(paddingValues)
                )
            }
        }
    }
}

पहली इमेज. कस्टम ऐनिमेशन वाला ऐप्लिकेशन.