Lottie Compose: playing compositions in a sequence is buggy

[sheinin]

Describe the bug

The task is to achieve what works flawlessly in LottieAnimationView, playing compositions sequentially.

I have two samples of code, both of which produce buggy results.

One: the last frame of composition doesn't disappear the animation leaves a trail of frames from compositions that stopped playing.

@Composable
fun Play(file: Int) {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(file)
    )
    val progress by animateLottieCompositionAsState(composition)
    LottieAnimation(
        composition = composition,
        progress = { progress }
    )
    if (progress == 1f) {
        // compute UI-blocking functions
        Play(nextFile)
    }
}

Two: leaves no trailing but the animation sequence flickers upon starting the next composition.

@Composable
fun Play() {
    @Composable
    fun c1(): Pair<LottieComposition?, Float> {
        val composition by rememberLottieComposition(
            LottieCompositionSpec.RawRes(R.raw.anim1)
        )
        val p by animateLottieCompositionAsState(composition)
        return composition to p
    }
    @Composable
    fun c2(): Pair<LottieComposition?, Float> {
        val composition by rememberLottieComposition(
            LottieCompositionSpec.RawRes(R.raw.anim2)
        )
        val p by animateLottieCompositionAsState(composition)
        return composition to p
    }
    val dir = remember { mutableStateOf(false) }
    val p = if (dir.value) c1() else c2()
    LottieAnimation(
        composition = p.first,
        progress = { p.second }
    )
    if (p.second == 1f) {
        // ui-blocking
        dir.value = !dir.value
    }
}

Possibly related issue: https://stackoverflow.com/questions/73633216/update-lottie-animations-with-jetpack-compose-leads-to-glitch

What version of Lottie did you test this on?

com.airbnb.android:lottie-compose:6.1.0

What version of Android did you test this on?

Android Studio Jellyfish AGP 8.3.1

Steps To Reproduce Steps to reproduce the behavior:

Create a project with two sequences, eg an object moving back and forth.

Screenshots

[gpeal]

Your first example renders LottieAnimation twice which is probably not expected.

In your second example, you have nested composable which you never want to do. Each composable is an anonymous function that will be different each time your outer composable recomposes.

Also, in the second example, you're going to flip dir every time the outer composable renders when progress == 1f which will cause it to flip back and forth as each time you flip the state, it will recompose.

I would recommend something more like this. I think you'll find a lot more flexibility for use cases like this with LottieAnimatable

val composition1 by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
val composition2 by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.wave))
val state = remember { LottieAnimatable() }

LaunchedEffect(composition1, composition2) {
    if (composition1 == null || composition2 == null) return@LaunchedEffect
    state.animate(composition1)
    state.animate(composition2)
}

LottieAnimation(state.composition, { state.progress })

[sheinin]

I rushed to mark it as complete, but there is still a glitch. Once the "state == 1" blocking actions are complete the animation jumps ahead from the first frame of the next composition, so the sequence is not smooth. In Android View, the next iteration of animation is initiated in code after the completion of the blocking action. With @gpeal solution compositions continue while the main thread is blocked resulting in jumpy animation.

val composition1 by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.heart))
val composition2 by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.wave))
val state = remember { LottieAnimatable() }

LaunchedEffect(composition1, composition2) {
    if (composition1 == null || composition2 == null) return@LaunchedEffect
    state.animate(composition1)
    state.animate(composition2)
}

LottieAnimation(state.composition, { state.progress })

/* ## THIS LINE ## */
if (state.progress) // perform blocking actions

[gpeal]

What are your "blocking actions"? That doesn't sound like something that should be happening in the body of a composable.

[sheinin]

The command increases value of an observable in ViewModel, which triggers database queries:

// Composable
if (state.progress == 1f) store.step.postValue(store.step.value?.plus(1))

...

// ViewModel
store.step.observe(this) { count ->
         when (count) {
                 0 -> // query one
                1 -> // query two
                etc...
          }
}

Here's how it works in View:

// Listen to end of Lottie composition
view.findViewById<LottieAnimationView>(R.id.animate).also { an ->
                an.addAnimatorListener(
                    object : Animator.AnimatorListener {
                        override fun onAnimationStart(p0: Animator) {}
                        override fun onAnimationEnd(p0: Animator) {
                                when (step.value) {
                                    0 -> {
                                          //  query one
                                          step.postValue(step.value?.plus(1))
                                    }
                                    1 -> {
                                          //  query two
                                          step.postValue(step.value?.plus(1))
                                    }
                                   ...etc.
..............

// Observable:
private val step = MutableLiveData(-1).also {
        it.observe(this@MainActivity) { i ->
            if (i > 0) {
                val task = LottieCompositionFactory.fromRawRes(this, if (dir) R.raw.anim1 else R.raw.anim2)
                task.addListener { composition ->
                    view.findViewById<LottieAnimationView>(R.id.animate).also { an ->
                        an.setComposition(composition)
                        an.playAnimation()
                    }
                }
                dir = !dir
            }
        }
    }

// 

[sheinin]

Discovered further, slighter bug.

[gpeal]

I don't think there is an issue with Lottie here. If you'd like support with your specific compose code and how to structure your code, StackOverflow may be a better fit.

But I suspect you lightly want to trigger whatever state/external update you want from the LaunchedEffect at the appropriate time not in the body of your composable.