Revision history [back]

We can add animation to Jetpack Compose UI by using the Animation components that are provided by the Jetpack Compose library.

Here are the steps to add animation to the UI using Jetpack Compose:

1. First, add the necessary dependencies for the animation. In your app-level Gradle file, add the following dependencies:

dependencies {
    implementation "androidx.compose.animation:animation:$compose_version"
}

1. Next, create an animation state variable to hold the current value of the animation. You can use the remember function to create this variable, which ensures that the state is retained across configuration changes:

val animatedProgress = remember { Animatable(initialValue = 0f) }

1. Now, you can create an animation using the animateTo method on the animatedProgress variable. For example, to animate the progress value from 0 to 1 over a duration of 1 second, you can use the following code:

LaunchedEffect(Unit) {
    animatedProgress.animateTo(
        targetValue = 1f,
        animationSpec = tween(durationMillis = 1000)
    )
}

1. Finally, you can use the value of the animation state variable to animate the UI element. For example, to animate the transparency of a Text element based on the value of animatedProgress, you can use the following code:

Text(
    text = "Hello world!",
    alpha = animatedProgress.value
)

These are the basic steps to add animation to a Jetpack Compose UI. By using the various Animation components provided by the Jetpack Compose library, you can create a wide range of animations to enhance the user experience of your app.