Jetpack Compose - 状态变化时动画重组

Question

我在状态更改时为可组合项设置动画时遇到问题。

我有一个可组合项，它接收 Interval （自定义类）和 List 类型的对象。这些是在整个活动使用过程中通过 ViewModel 动态生成的。

当 interval 和 answerOptions 的状态发生变化，让旧版本的可组合项滑出，新版本滑入时，如何为锻炼视图重组设置动画？

@Composable
fun ExerciseView(interval: State<Interval>, answerOptions: State<List<Int>>, audioGenerator: AudioGenerator){
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        //Composable
        IntervalPlayer(
            interval.value,
            audioGenerator
        )

        //Composable
        OptionButtonList(answerOptions.value, interval.value.semitones - 1)
    }
}

我一直在查看动画文档，但我找不到任何有关自定义对象状态更改的信息，仅针对可见性、颜色、位置和比例等属性。

提前谢谢您！

Answer 1

您可以通过将内容包装在 AnimatedContent 中来做到这一点。

data class CustomClass(val number: Int)

@Composable
fun ExerciseScreen() {
    val customState = remember {
        mutableStateOf(CustomClass(1))
    }
    ExerciseView(customState) { customState.value = CustomClass(Random.nextInt()) }
}

@Composable
fun ExerciseView(
    customState: State<CustomClass>,
    onClick: () -> Unit,
) {
    AnimatedContent(
        targetState = customState.value,
        transitionSpec = {
            slideInHorizontally(
                initialOffsetX = { fullWidth -> fullWidth },
            ) togetherWith slideOutHorizontally(
                targetOffsetX = { fullWidth -> -fullWidth },
            )
        },
        label = "Exercise View animation",
        modifier = Modifier.fillMaxSize(),
    ) { state ->
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            //Composable
            Button(onClick = onClick) {
                Text(text = state.number.toString())
            }
        }
    }
}