How to Implement 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:

Continue Exploring Jetpack Compose:

Leave a Comment Cancel reply