How to Implement Jetpack Compose InfiniteTransition?

Jetpack compose InfiniteTransition

In Jetpack Compose, InfiniteTransition is the easy way to run an animation forever. We can create its instance using rememberInfiniteTransition.

val transition = rememberInfiniteTransition()

The animations can be added with animateColor, animateFloat, or animateValue methods. Let’s look at animateFloat method:

@Composable
fun InfiniteTransition.animateFloat(
    initialValue: Float,
    targetValue: Float,
    animationSpec: InfiniteRepeatableSpec<Float>
): State<Float>

initialValue – initial value of the animation

targetValue – final value of the animation

animationSpec – animation specification. You can use infiniteRepeatable.

Read Jetpack Compose Animatable to understand the basics of animations.

Here is an example of InfiniteTransition:

@Composable
fun MyUI() {

    // to stop the animation
    var animationRunning by remember {
        mutableStateOf(true)
    }

    if (animationRunning) {
        val transition = rememberInfiniteTransition()

        val scale by transition.animateFloat(
            initialValue = 1f,
            targetValue = 1.5f,
            animationSpec = infiniteRepeatable(
                animation = tween(durationMillis = 1000),
                repeatMode = RepeatMode.Reverse
            )
        )

        // heart icon
        Icon(
            imageVector = Icons.Outlined.Favorite,
            contentDescription = "Favorite",
            tint = Color.Red,
            modifier = Modifier
                .scale(scale = scale)
                .size(size = 64.dp)
        )
    }

    // gap between the icon and the button
    Spacer(modifier = Modifier.height(16.dp))

    // stop button
    Button(onClick = {
        animationRunning = false
    }) {
        Text(text = "STOP")
    }
}

Output:

InfiniteTransition

Leave a Comment