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

Question

我正在尝试从下到上定期发射一些 Box。我几乎已经做到了这一点，但由于某种原因，我的盒子没有均匀分布，正如您从 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: 现在已经尝试了接受的答案，它没有按预期工作。请参阅下面的评论。谢谢！

Answer 1

这是因为 delay 也在 infiniteRepeatable 中重复出现。换句话说，第一次迭代中相隔 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
                    )
                )
            )
        }
     }
...

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

How to improve my animation and make it even (Jetpack Compose)?

android

android-animation

kotlin

android-jetpack-compose