Lottie Compose: playing compositions in a sequence is buggy about lottie-android

[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 })

[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.

[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.