Jetpack Compose Crossfade 在 Alpha 中被破坏

Question

自从 Compose Alpha 发布后，我的交叉淡入淡出动画不再有效，我非常感谢您的帮助，让它们再次工作。我是 Android/Compose 的新手。我知道 Crossfade 正在寻找其 targetState 中的状态变化以触发交叉淡入淡出动画，但我很困惑如何合并它。我正在尝试将某些可组合项包装在 Crossfade 动画中。

这是官方文档和有用的游乐场示例，但自从 Alpha 发布以来我仍然无法使用它 https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#crossfade https://foso.github.io/Jetpack-Compose-Playground/animation/crossfade/

这是我的代码，在这种情况下，我希望使用 String 当前路由本身作为 targetState 作为 mutableStateOf 对象。我愿意使用任何可行的方法。

@Composable
fun ExampleComposable() {

val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute: String? = navBackStackEntry?.arguments?.getString(KEY_ROUTE)

val exampleRouteTargetState = remember { mutableStateOf(currentRoute)}

Scaffold(
    ...
    NavHost(navController, startDestination = "Courses") {
    composable("Route") {
        Crossfade(targetState = exampleRouteTargetState, animationSpec = tween(2000)) {
            ExampleComposable1()
        }
    }
    composable("Other Route")
        ExampleComposable2()
    }
)
...

}

导航不应该触发“exampleRouteTargetState”变量的状态变化，然后触发淡入淡出吗？如果您认为将可组合项包装在 NavHost 中可能会产生问题，我也可以将其包装在别处。非常感谢您的帮助！！

Answer 1

仍然没有让 Crossfade 再次工作，但我能够在 NavHost 中实现一些转换。希望这对某人有帮助。如果您想微调这些高级动画，请参阅以下文档： https://developer.android.com/jetpack/compose/animation#animatedvisibility

@ExperimentalAnimationApi
@Composable
fun ExampleAnimation(content: @Composable () -> Unit) {
    AnimatedVisibility(
        visible = true,
        enter = fadeIn(initialAlpha = 0.3f),
        exit = fadeOut(),
        content = content,
        initiallyVisible = false
    )
}

然后像这样用动画简单地包装 NavHost 可组合声明

NavHost(navController, startDestination = "A Route") {
composable(Screen.YourObject.Route) {
    ExampleAnimation {
        YourComposable()
    }
}

Answer 2

最近 Google Accompanist 添加了一个库，它为 Jetpack Navigation Compose 提供 Compose Animation 支持。请检查一下。

https://github.com/google/accompanist/tree/main/navigation-animation

Jetpack Compose Crossfade 在 Alpha 中被破坏

Jetpack Compose Crossfade broken in Alpha

android

kotlin

android-animation

android-jetpack

android-jetpack-compose