Lottie already supports Jetpack Compose!

Your likes are the biggest motivation for me to write

An overview of the

Lottie is an excellent animation framework for mobile apps that supports adding animations to native apps. Lottie makes it easier for engineers to create richer animation effects without having to rewrite code. It eliminates the need to use GIFs to display effects and is already well known in mobile development. With the official release of Jetpack Compose 1.0, Lottie also supports Jetpack Compose. This article will guide you through how to use Lottie animation in Jeptack Compose. The Lottie animation files used in this article are from the official Lottie website, where you can find more free Lottie animation files.

Add Lottie dependencies

You need to add dependencies to the build.gradle(app) script file.

Implementation “com. Reality. Android: Lottie – compose: 4.0.0”

Configure Lottie resources

You can get static JSON resources for Lottie animations that you want to add from the Lottie website or from other sources, or you can use a URL.

If you are using a static JSON file, you can place it in the RES/RAW directory.

If you use URL mode, you can use URL mode later when you need to load Lottie.

Create Lottie animation

First, we create two mutableStates that describe the speed and start pause state of the animation.

var isPlaying by remember {
    mutableStateOf(true)}var speed by remember {
    mutableStateOf(1f)}Copy the code

Next, we need to load our Pre-prepared Lottie resources. Here I choose to use static resources in the local RES/RAW directory.

val lottieComposition by rememberLottieComposition(
     spec = LottieCompositionSpec.RawRes(R.raw.lottie),
)
Copy the code

Lottie also provides you with other ways to load.

sealed interface LottieCompositionSpec {
    // Load static resources in the res/raw directory
    inline class RawRes(@androidx.annotation.RawRes val resId: Int) : LottieCompositionSpec

    / / load the URL
    inline class Url(val url: String) : LottieCompositionSpec

    // Load static resources in the phone directory
    inline class File(val fileName: String) : LottieCompositionSpec

    // Load static resources in the asset directory
    inline class Asset(val assetName: String) : LottieCompositionSpec

    // Load the JSON string directly
    inline class JsonString(val jsonString: String) : LottieCompositionSpec
}
Copy the code

Next, we need to describe Lottie’s animation state.

val lottieAnimationState by animateLottieCompositionAsState (
    composition = lottieComposition, // Animation resource handle
    iterations = LottieConstants.IterateForever, // Number of iterations
    isPlaying = isPlaying, // Animation playback state
    speed = speed, // Animation speed state
    restartOnPlay = false // Whether to restart after pausing from the beginning
)
Copy the code

Finally, we just need to provide the animation resource handle and animation state to LottieAnimation Composable.

LottieAnimation(
    lottieComposition,
    lottieAnimationState,
    modifier = Modifier.size(400.dp)
)
Copy the code

Results show

The source code

@Preview
@Composable
fun LottieDemo(a) {
    var isPlaying by remember {
        mutableStateOf(true)}var speed by remember {
        mutableStateOf(1f)}val lottieComposition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.lottie),
    )

    val lottieAnimationState by animateLottieCompositionAsState (
        composition = lottieComposition,
        iterations = LottieConstants.IterateForever,
        isPlaying = isPlaying,
        speed = speed,
        restartOnPlay = false
    )


    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column {
            Text(
                text = "Lottie Animation In Jetpack Compose",
                fontSize = 30.sp
            )
            Spacer(modifier = Modifier.height(30.dp))
            LottieAnimation(
                lottieComposition,
                lottieAnimationState,
                modifier = Modifier.size(400.dp)
            )

            Row(
                horizontalArrangement = Arrangement.SpaceAround,
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Row(
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Button(
                        onClick = {
                            speed = max(speed - 0.25 f.0f)
                        },
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = Color(0xFF0F9D58)
                        )
                    ) {
                        Text(
                            text = "-",
                            color = Color.White,
                            fontWeight = FontWeight.Bold,
                            fontSize = 20.sp,
                        )
                    }

                    Text(
                        text = "Speed ( $speed)",
                        color = Color.Black,
                        fontWeight = FontWeight.Bold,
                        fontSize = 15.sp, modifier = Modifier.padding(horizontal = 10.dp)

                    )
                    Button(
                        onClick = {
                            speed += 0.25 f
                        },
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = Color(0xFF0F9D58)
                        )
                    ) {
                        Text(
                            text = "+",
                            color = Color.White,
                            fontWeight = FontWeight.Bold,
                            fontSize = 20.sp ) } } Button( onClick = { isPlaying = ! isPlaying }, colors = ButtonDefaults.buttonColors( backgroundColor = Color(0xFF0F9D58)
                    )
                ) {
                    Text(
                        text = if (isPlaying) "Pause" else "Play",
                        color = Color.White
                    )
                }
            }
        }
    }
}
Copy the code