Android 如何改进我的动画并使其均衡（Jetpack Compose）？

我试着定期从下到上点燃一些盒子。我几乎成功地做到了这一点，但由于某些原因，我的方框之间的间隔并不均匀，正如您从gif中看到的那样。我的感觉是，我的代码不是实现我要做的事情的最佳方式。有人有什么想法吗

这是我的密码：

listOf(
        Color(0xffDFFF00),
        Color(0xffFFBF00),
        Color(0xffFF7F50),
        Color(0xffDE3163),
        Color(0xff9FE2BF),
        Color(0xff40E0D0),
        Color(0xff6495ED),
        Color(0xffCCCCFF),
    ).forEachIndexed { index, color ->
        val infiniteTransition = rememberInfiniteTransition()
        val positionState = infiniteTransition.animateFloat(
            initialValue = 0f,
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = 2500,
                    delayMillis = delay,
                    easing = LinearEasing
                )
            )
        )
        delay += 1000
        val modifier = Modifier.offset(
            x = (maxWidth - tileSize),
            y = maxHeight - (maxHeight * positionState.value),
        )
       Box(
            modifier = modifier
                .size(tileSize)
                .clip(RoundedCornerShape(5.dp))
                .background(color = color)
        ) {
            Text(
                text = text,
                Modifier.align(Alignment.Center),
                style = TextStyle(fontWeight = FontWeight.Bold)
            )
        }

这是gif：

PS：现在已经尝试了被接受的答案，它并没有像预期的那样工作。请看下面的评论。谢谢

这是因为延迟也在无限重复中重复。换句话说，在第一次迭代中相隔1000毫秒的动画在第二次迭代中相隔2000毫秒

在无限过渡中，还不支持非重复延迟。这里我建议使用Animatable来实现交错无限动画

...
forEachIndexed { index, color ->
    val positionAnimation = remember { Animatable(0f) }
    LaunchedEffect(positionAnimation) {
        delay(1000 * index) // this delay increases with the index
        launch {
            positionAnimation.animateTo(
                1f,
                animationSpec = infiniteRepeatable(
                    animation = tween(
                        durationMillis = 2500, // remove the delay from infinite repeatable
                        easing = LinearEasing
                    )
                )
            )
        }
     }
...

这是因为延迟也在无限重复中重复。换句话说，在第一次迭代中相隔1000毫秒的动画在第二次迭代中相隔2000毫秒

在无限过渡中，还不支持非重复延迟。这里我建议使用Animatable来实现交错无限动画

...
forEachIndexed { index, color ->
    val positionAnimation = remember { Animatable(0f) }
    LaunchedEffect(positionAnimation) {
        delay(1000 * index) // this delay increases with the index
        launch {
            positionAnimation.animateTo(
                1f,
                animationSpec = infiniteRepeatable(
                    animation = tween(
                        durationMillis = 2500, // remove the delay from infinite repeatable
                        easing = LinearEasing
                    )
                )
            )
        }
     }
...

---

有一些问题。如果使用的是列，则每个框从不同的h位置开始。您应该在偏移修饰符中考虑它，否则使用框作为父。然后，因为你正在使用一个无限循环，你应该考虑的第一个项目再次启动动画之前，所有其他项目完成动画，它重叠的其他框。谢谢您的答复。我使用的不是列，而是带有约束的框。但是是的，可能是无限循环导致了这个问题。我会努力解决的。有一些问题。如果使用的是列，则每个框从不同的h位置开始。您应该在偏移修饰符中考虑它，否则使用框作为父。然后，因为你正在使用一个无限循环，你应该考虑的第一个项目再次启动动画之前，所有其他项目完成动画，它重叠的其他框。谢谢您的答复。我使用的不是列，而是带有约束的框。但是是的，可能是无限循环导致了这个问题。我会努力解决的。哦，哇，太谢谢你了，我已经坚持了好几天了！所以我刚刚尝试了这个代码，结果是在开始的时候有8秒的停顿，然后只有第8个盒子，紫色的盒子向上移动。有什么想法吗@Doris Liu可能是延迟变量中存储的延迟量一直在增长，并且从未重置。如果改为尝试延迟1000*索引，会怎么样？看看新的编辑。哦，哇，非常感谢你，我已经坚持了好几天了！所以我刚刚尝试了这个代码，结果是在开始的时候有8秒的停顿，然后只有第8个盒子，紫色的盒子向上移动。有什么想法吗@Doris Liu可能是延迟变量中存储的延迟量一直在增长，并且从未重置。如果改为尝试延迟1000*索引，会怎么样？查看新编辑。