CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-animationlottiecompose-recomposition
Alejandro Casanova
Alejandro Casanova

Reputation: 3681

How to play Lottie animation from start every time in Jetpack Compose

I have a screen showing a Lottie animation; however, the content of the screen changes and so the animation. I'm showing the animation only once and I need that when the content of the screen gets updated (recomposition), the updated animation starts playing. Currently the first animation plays all the way up to the end and when the content changes the second animation shows only a static image which I assume is its last frame.

Here is the code snippet I'm using:

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
val progress by animateLottieCompositionAsState(composition = composition)
LottieAnimation(
    composition = composition,
    progress = { progress },
    modifier = modifier
)

I've tried making the progress 0F but then animations don't load or don't play since I can see no content but maybe that's only the first frame, that would be the below code snippet:

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
LottieAnimation(
    composition = composition,
    progress = { 0F },
    modifier = modifier
)

My goal is to show both animations from the start regardless of wether the first one finished or not. Any ideas?

Upvotes: 1

Views: 7299

Answers (3)

Sahrul Hidayat
Sahrul Hidayat

Reputation: 1

You can make lottie animation repeat forever like this :

val composition by rememberLottieComposition(
    spec = LottieCompositionSpec.RawRes(R.raw.animation)
)

LottieAnimation(
    modifier = Modifier,
    composition = composition,
    iterations = LottieConstants.IterateForever
)

or play just once after recomposition like this :

val composition by rememberLottieComposition(
    spec = LottieCompositionSpec.RawRes(R.raw.animation)
)

LottieAnimation(
    modifier = Modifier,
    composition = composition,
    restartOnPlay = true
)

Upvotes: 0

Antonio Oliva
Antonio Oliva

Reputation: 23

I've faced the same problem, and wrapping up the composable with the key element did the trick.

So in your case, it'd look like

val key = remember { mutableStateOf(dynamicAnimationRes) }
if (key.value != dynamicAnimationRes) {
    key.value = dynamicAnimationRes
}

key(key.value) {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(dynamicAnimationRes))
    LottieAnimation(
        composition = composition,
        modifier = modifier
    )
}

Upvotes: 2

Steyrix
Steyrix

Reputation: 3236

You are remembering Lottie animation state, so after recomposition it will not play again since its state came to the end stage and is passed to next composition.

Have you tried setting up the isPlaying parameter?

val composition by rememberLottieComposition(...)
val animationState by animateLottieCompositionAsState(
    composition = composition, 
    isPlaying = true
)

LottieAnimation(
    composition = composition,
     progress = { animationState },
     modifier = modifier
)

UPD: You can also simply remove animationState remembering.

val composition by rememberLottieComposition(...)

LottieAnimation(
    composition = composition,
)

UPD2: Since Compose can optimize recompositions and recompose only what has actually changed, your Lottie animation is probably not recomposed at all. Maybe you should loop it like this

val animationState by animateLottieCompositionAsState(
    composition = composition, 
    iterations = LottieConstants.IterateForever
)

Upvotes: 2

Related Questions