গন্তব্যের মধ্যে অ্যানিমেট করুন

ব্যবহারকারীরা আপনার অ্যাপের মাধ্যমে নেভিগেট করার সাথে সাথে মসৃণ ভিজ্যুয়াল ট্রানজিশন তৈরি করতে 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)
                )
            }
        }
    }
}

চিত্র 1 । কাস্টম অ্যানিমেশন সহ অ্যাপ।