在目的地之间添加动画效果

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)
                )
            }
        }
    }
}
AnimationSnippets.kt

图 1。具有自定义动画的应用。