Question

我正在努力使用 compose 制作简单的动画（有几个教程可用，但使用的是旧版本的 compose）。

注意： 撰写版本：1.0.0-beta03

为了动画视图的大小（就像进度指示器一样），我有以下代码：

@Composable
private fun SingleProgress(
    percentage: Float
) {
    val animationState = remember { mutableStateOf(AnimationState.START) }
    val transition = updateTransition(targetState = animationState.value, label = "transitionLabel")

    val progressTransition = transition.animateFloat(
        transitionSpec = { tween(durationMillis = 3000) },
        label = "progressTransition"
    ) {
        if (it == AnimationState.START) 0.0001f else (percentage / 100)
    }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Box(
            modifier = Modifier
                .weight(progressTransition.value)
                .fillMaxWidth()
                .height(5.dp)
                .background(Color.Green)
        )

        Box(
            modifier = Modifier
                .weight(1 - progressTransition.value)
                .fillMaxWidth()
                .height(5.dp)
                .background(Color.Red)
        )
    }

    // animate all views to END state
    animationState.value = AnimationState.END
}

到目前为止一切都很好（即使这不是自动从一个值到另一个值的动画的最佳方法）。

现在我想为多个视图设置动画，尝试过相同的方法但没有成功：

@Composable fun MultipleProgess() {
val listOfPercentages = listOf(20F, 60F, 20F)
val listOfColors = listOf(Color.Red, Color.Green, Color.Blue)

val animationState = remember { mutableStateOf(AnimationState.START) }
val transition = updateTransition(targetState = animationState.value, label = "transitionLabel")

Row(
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight(),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    listOfPercentages.forEachIndexed { index, value ->
        val percentage = value / 100

        val progressTransition = transition.animateFloat(
            transitionSpec = { tween(durationMillis = 3000) },
            label = "progressTransition"
        ) {
            if (it == AnimationState.START) 0.0001f else (percentage)
        }

        Box(
            modifier = Modifier
                .weight(progressTransition.value)
                .fillMaxWidth()
                .height(2.5.dp)
                .background(listOfColors[index])
        )
    }
}

// animate all views to END state
animationState.value = AnimationState.END
 }

问题：

我可以改进/简化 SimpleProgress 上的动画吗？
可组合的 MultipleProgress 无法按预期工作。动画不考虑补间持续时间，这是一个很难理解那里发生了什么的快速动画。实现同时运行的多个进度的最佳方法是什么？

Android 撰写动画（如水平进度指示器）

0 个答案: