使用Compose在导航中的Composable之间制作动画

html5 • • 问答

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

我创建了我的 2 Composables，一切正常。

但我缺少的是页面之间的动画（或过渡）。我没有找到任何资源指出如何在 Compose 中做到这一点。

我知道所有动画都基于 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)
        }
    }
}

回答

在 alpha-09 中，这不受支持。:(

请为这个问题加注星标：https : //issuetracker.google.com/issues/172112072

以上是使用Compose在导航中的Composable之间制作动画的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>