Sequence / Chaining of animations in One LottieAnimationView

Question

I've received multiple animation files that should be played in sequence using Lottie library

What I'm currently trying to do is to reuse same LottieAnimationView and just set next animation when first one finishes. Code looks like this:

private fun playFirstAnimation() {
    binding.animation.setAnimation(R.raw.progress_1)
    binding.animation.repeatCount = 2
    binding.animation.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationRepeat(animation: Animator?) = Unit
        override fun onAnimationCancel(animation: Animator?) = Unit
        override fun onAnimationStart(animation: Animator?) = Unit

        override fun onAnimationEnd(animation: Animator?) {
            binding.animation.removeAnimatorListener(this)
            notifyFirstAnimationFinished()
            playSecondAnimation()
        }
    })
    binding.animation.playAnimation()
}

private fun playSecondAnimation() {
    binding.animation.setAnimation(R.raw.progress_2)
    binding.animation.repeatCount = 0
    binding.animation.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationRepeat(animation: Animator?) = Unit
        override fun onAnimationCancel(animation: Animator?) = Unit
        override fun onAnimationStart(animation: Animator?) = Unit

        override fun onAnimationEnd(animation: Animator?) {
            binding.animation.removeAnimatorListener(this)
            notifySecondAnimationFinished()
            playThirdAnimation()
        }
    })
    binding.animation.playAnimation()
}

The problem here (apart from ugly code) is that I get a small flicker (animation dissapears totally and nothing is displayed in it's location) when changing animations for a short time. I can't have all the animations merged into one, since I need to know when exactly one animation finished. And I really wouldn't want to have a separate LottieAnimationView for each animation and replacing them on every change as I might have many animations.

What options do I have in this situation?

Answer 1

Turns out there's quite a simple solution to this problem. Instead of calling setAnimation we can call setComposition and provide preloaded results from LottieCompositionFactory.fromRawResSync, LottieCompositionFactory.fromRawRes or any other method which is appropriate to your needs.