Use LottieAnimation in Jetpack Compose for Icon

Question

Is there any way to use a JSON animation file using LottieAnimation in Jetpack Compose for an interactive element such as a to-do list's checkmark so that it animates when clicked?

I currently have a Row with Icon and a Column that further contains title and subtitle. I want this Icon to have a Lottie Animation.

Answer 1

You can use the LottieAnimation composable.

Something like:

var isPlaying by remember { mutableStateOf(false) }

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
val progress by animateLottieCompositionAsState(
    composition,
    isPlaying = isPlaying,
)

Row(verticalAlignment = Alignment.CenterVertically) {
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.clickable{ isPlaying = !isPlaying }
    )

    Text("Title", )
}