NavDisplay में, ऐनिमेशन की सुविधाएं पहले से मौजूद होती हैं. इनकी मदद से, उपयोगकर्ताओं को आपके ऐप्लिकेशन में आसानी से नेविगेट करने में मदद मिलती है. साथ ही, उन्हें विज़ुअल ट्रांज़िशन भी आसानी से दिखते हैं. मेटाडेटा का इस्तेमाल करके, इन ऐनिमेशन को NavDisplay के लिए या Scene लेवल पर, ग्लोबल तौर पर पसंद के मुताबिक बनाया जा सकता है.
पहले से मौजूद ऐनिमेशन की सुविधाओं के बारे में जानकारी
NavDisplay नेविगेशन के दौरान कॉन्टेंट को ऐनिमेट करने का तरीका तय करने के लिए, ContentTransform API का इस्तेमाल करता है. NavDisplay, मौजूदा सीन की क्लास और उसकी key प्रॉपर्टी से मिले किसी मुख्य फ़्रेम में बदलाव होने पर, सीन के बीच ट्रांज़िशन को अपने-आप ऐनिमेट करता है. इस कुंजी में बदलाव होने पर, NavDisplay ट्रांज़िशन के टाइप के लिए ContentTransform का इस्तेमाल करता है. जैसे, ट्रांज़िशन में आगे बढ़ना, पीछे जाना या अनुमानित तौर पर पीछे जाना. अगर ContentTransform को तय नहीं किया गया है, तो NavDisplay, इससे जुड़े डिफ़ॉल्ट ट्रांज़िशन का इस्तेमाल करता है.
डिफ़ॉल्ट ट्रांज़िशन को बदलना
NavDisplay को ट्रांज़िशन पैरामीटर देकर, ऐनिमेशन के डिफ़ॉल्ट व्यवहारों को बदला जा सकता है.
transitionSpec: यह पैरामीटर, बैक स्टैक में कॉन्टेंट जोड़ने पर लागू होने वालेContentTransformको तय करता है. बैक स्टैक में कॉन्टेंट तब जोड़ा जाता है, जब आगे की ओर नेविगेट किया जाता है.popTransitionSpec: यह पैरामीटर, बैक स्टैक से कॉन्टेंट हटाए जाने पर लागू होने वालेContentTransformको तय करता है. जैसे, जब वापस नेविगेट किया जाता है.predictivePopTransitionSpec: यह पैरामीटर, उसContentTransformको तय करता है जिसे कॉन्टेंट को पॉप अप करते समय लागू करना होता है. ऐसा तब होता है, जब अनुमानित बैक जेस्चर का इस्तेमाल किया जाता है.
Scene लेवल पर ट्रांज़िशन बदलना
NavDisplay ने यहां दी गई मेटाडेटा कुंजियों को तय किया है. इनका इस्तेमाल करके, अलग-अलग सीन के लिए कस्टम ऐनिमेशन तय करने के लिए, मेटाडेटा का इस्तेमाल किया जा सकता है:
NavDisplay.TransitionKey: आगे बढ़ने का नेविगेशन ऐनिमेशन.NavDisplay.PopTransitionKey: पीछे की ओर नेविगेट करने का ऐनिमेशन.NavDisplay.PredictivePopTransitionKey: पीछे जाने पर झलक दिखाने वाला ऐनिमेशन.
अगर ये ट्रांज़िशन दिए जाते हैं, तो इनका इस्तेमाल 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 = metadata { put(NavDisplay.TransitionKey) { // Slide new content up, keeping the old content in place underneath slideInVertically( initialOffsetY = { it }, animationSpec = tween(1000) ) togetherWith ExitTransition.KeepUntilTransitionsFinished } put(NavDisplay.PopTransitionKey) { // Slide old content down, revealing the new content in place underneath EnterTransition.None togetherWith slideOutVertically( targetOffsetY = { it }, animationSpec = tween(1000) ) } put(NavDisplay.PredictivePopTransitionKey) { // 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) ) } } } }
सीन के बीच नेविगेशन एंट्री में बदलाव करना
सीन का इस्तेमाल करके कस्टम लेआउट बनाने वाले ऐप्लिकेशन में, ट्रांज़िशन के दौरान NavEntry को दोनों सीन की entries प्रॉपर्टी में शामिल किया जा सकता है. आंतरिक तौर पर, NavDisplay यह पुष्टि करता है कि हर एंट्री, किसी भी समय ज़्यादा से ज़्यादा एक सीन में दिखे. इससे NavEntry को रेंडर करने वाले सीन में बदलाव होने पर, ट्रांज़िशन में रुकावट आ सकती है. सीन के बीच एंट्री को आसानी से ऐनिमेट करने के लिए, NavDisplay को SharedTransitionLayout में रैप किया जा सकता है. साथ ही, NavDisplay को SharedTransitionScope दिया जा सकता है. ऐसा नीचे दिए गए उदाहरण में दिखाया गया है:
SharedTransitionLayout { NavDisplay( // ... sharedTransitionScope = this ) }