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) ) } } } }