بین مقصدها متحرک شوید

NavDisplay قابلیت‌های پویانمایی داخلی را برای ایجاد انتقال‌های بصری صاف در حین حرکت کاربران در برنامه شما فراهم می‌کند. شما می توانید این انیمیشن ها را به صورت جهانی برای NavDisplay یا بر اساس هر NavEntry با استفاده از ابرداده سفارشی کنید.

نادیده گرفتن انتقال های پیش فرض

NavDisplay از ContentTransform s برای تعریف نحوه متحرک شدن محتوا در حین پیمایش استفاده می کند. می‌توانید با ارائه پارامترهای انتقال به 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)
                )
            }
        }
    }
}
AnimationSnippets.kt

شکل 1 . برنامه با انیمیشن های سفارشی