时间戳

首页 > 解决方案 > 使用 Compose 在导航中的可组合项之间制作动画

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

问题描述

我已经开始尝试使用 Navigation 进行撰写。

我创建了 2 个 Composable，一切正常。

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

我知道所有动画都基于 Compose 中的状态，但我唯一知道的是 Navigation Back Stack。

标签： androidandroid-jetpack-compose

解决方案

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

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

你可以像这样使用它：

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

推荐阅读