在 Jetpack Compose 中的三个组件状态之间制作动画

Question

我熟悉 Jetpack Compose 中的 Transition API，它让我可以轻松地在 Compose 组件内的两个状态之间设置动画。

但是在三种不同状态之间制作动画的最佳方式是什么？

以组件的加载指示器为例。状态可以是 NotLoading、Loading 和 HasLoaded。我的想法是为组件和这些状态之间的转换设置一个加载指示器：

显示加载指示器的过渡：NotLoading -> Loading
显示数据的过渡：正在加载 -> HasLoaded

我想什么样的过渡并不重要，但我想先淡入加载指示器，然后淡出加载指示器并淡入内容。但这只是一个例子；实际上我需要指定转换参数。

使用 Jetpack Compose 实现此目的的最佳方法是什么？不确定我在这里的想法是否是最好的方法。

Answer 1

您可以使用具有 2 个以上状态的 Transition API - 并使用 animate*AsState APIs 定义每个组件的单独属性。

如果您有完全不同的可组合项，还有另一种选择，您可以使用 AnimatedContent APIs.

例如，下面的示例使用枚举 UiState 和一个在状态之间切换的按钮。然后将内容包装在 AnimatedContent() 可组合项中。默认情况下，初始内容淡出，然后目标内容淡入（这种行为称为淡入淡出）。

@Composable
fun AnimatedContentStateExample() {
    Column {
        var state by remember { mutableStateOf(UiState.Loading) }
        Button(onClick = {
            state = when (state) {
                UiState.Loading -> UiState.Loaded
                UiState.Loaded -> UiState.Empty
                UiState.Empty -> UiState.Loading
            }
        }) {
            Text("Switch States")
        }
        AnimatedContent(
            targetState = state
        ) { targetState ->
            // Make sure to use `targetState`, not `state`.
            when (targetState) {
                UiState.Loading -> {
                    CircularProgressIndicator()
                }
                UiState.Loaded -> {
                    Box(
                        Modifier
                            .background(androidGreen)
                            .size(100.dp))
                    Text("Loaded")
                }
                UiState.Empty -> {
                    Box(
                        Modifier
                            .background(androidBlue)
                            .size(200.dp))
                    Text("Empty")
                }
            }
        }
    }
}

您可以通过为 transitionSpec 参数指定一个 ContentTransform 对象来自定义此动画行为。您可以通过使用 with 中缀函数将 EnterTransition 与 ExitTransition 组合来创建 ContentTransform。您可以通过使用中缀函数将 SizeTransform 附加到 ContentTransform 上。

有关 AnimatedContent 的更多信息可在此处找到：https://developer.android.com/jetpack/compose/animation#animatedcontent。

这里是它的用法示例：https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/animation/animation/samples/src/main/java/androidx/compose/animation/samples/AnimatedContentSamples.kt

在 Jetpack Compose 中的三个组件状态之间制作动画

Animating between three component states in Jetpack Compose

android

android-jetpack-compose

jetpack-compose-animation