使用 Compose 在导航中的可组合项之间制作动画

我已经开始尝试撰写导航。

我创建了 2 个可组合项，一切正常。

但我缺少的是页面之间的动画（或过渡）。我没有找到任何资源指出如何在 Compose 中执行此操作。

我知道所有动画都基于 Compose 中的状态，但我唯一知道的是导航返回堆栈。

您可以使用我制作的可组合项来显示进入动画（在“进入”和“退出”参数中配置更好的效果）

@Composable
fun EnterAnimation(content: @Composable () -> Unit) {
    AnimatedVisibility(
        visibleState = MutableTransitionState(
            initialState = false
        ).apply { targetState = true },
        modifier = Modifier,
        enter = slideInVertically(
            initialOffsetY = { -40 }
        ) + expandVertically(
            expandFrom = Alignment.Top
        ) + fadeIn(initialAlpha = 0.3f),
        exit = slideOutVertically() + shrinkVertically() + fadeOut(),
    ) {
        content()
    }
}

你可以这样使用它：

NavHost(
    navController = navController,
    startDestination = "dest1"
) {
    composable("dest1") {
        EnterAnimation {
            FirstScreen(navController)
        }
    }
    composable("dest2") {
        EnterAnimation {
            SecondScreen(navController)
        }
    }
}