Pause and Resume Lottie Animation

Andy Joyce picture Andy Joyce · Nov 8, 2017 · Viewed 16.8k times · Source

I'm implementing a Lottie animation and the entire animation works great! However, i would like to add a bit of code that will pause the animation after 30 frames which I can then resume after a certain amount of time. Here is the code so far

animationView.playAnimation(0, 30)
animationView.addAnimatorListener(object : Animator.AnimatorListener {
   override fun onAnimationEnd(animation: Animator) {
      if (isLoading == false) {
         //Everything has loaded. Continue Animation 

         //This line has no effect. The animation does not continue
         animationView.playAnimation(30, 60)
         //Resuming the animation just makes the animation disappear
         //animation.resume()
      }
 }

Any advice would be appreciated!

Answer

Andre Breton picture Andre Breton · Nov 9, 2017

What you can do is use progress from LottieAnimationView, threads and a flag, this will allow you to pause at a certain progress and resume exactly when you need to play your animation again

I created the following example:

animationView.playAnimation()
animationView.loop(false)

isAnimating = true // Setup your flag

thread {
    while (isAnimating){ // Loop that checks the progress of your animation
        if (animationView.progress >= 0.5f){// If animation reaches 50%
            runOnUiThread {
                animationView.pauseAnimation()// Pause Animation
            }
            Thread.sleep(5000) // Pause for 5 seconds
            runOnUiThread {
                animationView.playAnimation(0.5f,1f) // Resume your animation from 50% to 100%
            }
            isAnimating = false
        }
        if(animationView.progress >= 1f){ // If animation reaches 100% stop animation
            runOnUiThread {
                animationView.cancelAnimation()
                isAnimating = false
            }
        }
    }
}

Hope it helps.