I also have a question about animations. I am using an infinite transition and I want my tiles to tr...

# compose

[Nat Strangerweather]

I also have a question about animations. I am using an infinite transition and I want my tiles to travel at the same speed. At the moment they are catching each other up because the durationMillis value is the same for all. How can I get them to all travel at the same speed? Please see gif in thread.

[Nat Strangerweather]

[Nat Strangerweather]

The other question is do I need to use coroutines so the main thread does not get blocked?

[Nat Strangerweather]

This is the code I am using:

val infiniteTransition = rememberInfiniteTransition()
    val durationMillis = remember { mutableStateOf(10000) }

    val positionState = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = durationMillis.value,
                easing = LinearEasing
            )
        )
    )

[Nat Strangerweather]

I tried looping in the following code:

layout(constraints.maxWidth, constraints.maxHeight) {
    var yPosition = 0
    val xPosition = 0
    val verticalAnimationPositioning =
        (constraints.maxHeight - (constraints.maxHeight * positionState.value)).toInt()
    placeables.forEachIndexed { index, placeable ->
        if (index <= 6) {
            placeable.placeRelative(x = xPosition, y = yPosition)
            yPosition += placeable.height
        } else if (index >= 7) {
            placeable.placeRelative(
                constraints.maxWidth - tileSize,
                yPosition - placeable.height * 7 + verticalAnimationPositioning,
                1f
            )
            yPosition += verticalAnimationPositioning
        }
    }

[Nat Strangerweather]

Here:   else if (index >= 7) {

[Nat Strangerweather]

I added:

durationMillis.value += 10000

[Nat Strangerweather]

but it did not help

[Doris Liu]

The problem is likely from this line: yPosition += verticalAnimationPositioning
This places the placeables (with index >= 7) verticalAnimationPositioning apart, yet that number is changing due to the animation. Hence the perceived catch up. If you'd like to have the placeables a fixed distance apart, I'd do yPosition += someFixedIntValue 🙂

[Doris Liu]

The other question is do I need to use coroutines so the main thread does not get blocked?

Do you mean coroutines for the animations? The infinite animations does a very lightweight setup before it starts, then it runs in an internally created LaunchedEffect . In other words, it won't block the main thread.

[Nat Strangerweather]

fabulous, many thanks for your reply Doris! 🙂