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?
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?UPD: You can also simply remove
animationState
remembering.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