I'm trying to adapt a CodingWithMitch video tutori...

# compose

[Nat Strangerweather]

I'm trying to adapt a CodingWithMitch video tutorial to my own needs. Basically, I have a list of boxes and I want each one to animate with a delay of 1 second after the other. I don't understand why my code does not work. The delay.value does not appear to update. Any ideas? 🧵

[Nat Strangerweather]

@Composable
fun Rocket(
    isRocketEnabled: Boolean,
    maxWidth: Dp,
    maxHeight: Dp
) {
    val modifier: Modifier
    val delay = remember { mutableStateOf(0) }
    val tileSize = 50.dp
    if (!isRocketEnabled) {
        Modifier.offset(
            y = maxHeight - tileSize,
        )
    } else {
        val infiniteTransition = rememberInfiniteTransition()
        val positionState = infiniteTransition.animateFloat(
            initialValue = 0f,
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = 2000,
                    delayMillis = delay.value,
                    easing = LinearEasing
                )
            )
        )
        modifier = Modifier.offset(
            x = (maxWidth - tileSize) * positionState.value,
            y = (maxHeight - tileSize) - (maxHeight - tileSize) * positionState.value,
        )

        listOf(
            Color(0xffDFFF00),
            Color(0xffFFBF00),
            Color(0xffFF7F50),
            Color(0xffDE3163),
            Color(0xff9FE2BF),
            Color(0xff40E0D0),
            Color(0xff6495ED),
            Color(0xffCCCCFF),
        ).forEachIndexed { index, color ->
            Box(
                modifier = modifier
                    .width(tileSize)
                    .height(tileSize)
                    .background(color = color)
            )
            delay.value += 1000
        }
    }
}

[Rick Regan]

Is this what you are looking for?

Animate Boxes.mp4

[Nat Strangerweather]

No, I am looking for something like in a space shooting game, where objects fire one after the other in the direction of a target.

[Nat Strangerweather]

Something like this but with more than one Box...

[Rick Regan]

Your code results in a box of a single color doing an animation "in place". I just moved all the code from val infiniteTransition through modifer = (adding a val before modifier) into the forEachIndexed to get the same in-place animation, just with all the colors in sequence.

[Nat Strangerweather]

Thanks it works!

[Rick Regan]

You seemed to have removed the delay; this is what I did (essentially the same as yours):
@Composable
fun Rocket(
    isRocketEnabled: Boolean,
    maxWidth: Dp,
    maxHeight: Dp
) {
    val delay = remember { mutableStateOf(0) }
    val tileSize = 50.dp
    if (!isRocketEnabled) {
        Modifier.offset(
            y = maxHeight - tileSize,
        )
    } else {
        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 = 2000,
                        delayMillis = delay.value,
                        easing = LinearEasing
                    )
                )
            )
            val modifier = Modifier.offset(
                x = (maxWidth - tileSize) * positionState.value,
                y = (maxHeight - tileSize) - (maxHeight - tileSize) * positionState.value,
            )

            Box(
                modifier = modifier
                    .width(tileSize)
                    .height(tileSize)
                    .background(color = color)
            )
            delay.value += 1000
        }
    }
}

[Nat Strangerweather]

Yeah I have just realised this

[Nat Strangerweather]

Many thanks!