在 Jetpack Compose 中的三个组件状态之间设置动画

Question

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

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

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

• 显示加载指示器的过渡：NotLoading -> Loading
• 显示数据的转换：Loading -> HasLoaded

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

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

Answer 1

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

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

例如，下面的示例使用 enumUiState和一个按钮来在状态之间进行更改。然后内容被包装在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")
                }
            }
        }
    }
}

ContentTransform您可以通过为参数指定一个对象来自定义此动画行为transitionSpec。您可以通过使用 with 中缀函数将与ContentTransform组合起来进行创建。您可以通过将其与 using 中缀函数附加来应用。EnterTransitionExitTransitionSizeTransformContentTransform

有关更多信息，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