Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pause and Resume Lottie Animation

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()
      }
 }
like image 776
Andy Joyce Avatar asked Nov 08 '17 17:11

Andy Joyce


People also ask

Can you pause a Lottie animation?

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.

How do you pause Lottie?

On non-touchscreens, I can pause a Lottie animation using your hover pause effect by hovering my cursor over the animation. I can then unpause it by removing my cursor. On touchscreens, I can pause it by tapping the animation.

Can Lottie animations be interactive?

Today we've released lottie-interactive, a simple and easy way to make your lottie animations interactive. Lottie-interactive is a custom web element adding hover, loop, play-once, play-on-show, click, morph and switch interactions to your lottie animations!

How do you slow down a Lottie animation?

You can use the SetSpeed action to a value between 1 and higher to make it faster. So 1 is normal speed, and 2 is faster and 3 is even faster. Any value between 0 and 1 will slow down the animation speed.


2 Answers

animationView.setMinAndMaxProgress(0.0f, 0.5f);//set 50% animation //lottie version 2.7.0
like image 102
mr.hir Avatar answered Sep 28 '22 02:09

mr.hir


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
            }
        }
    }
}
like image 21
Andre Breton Avatar answered Sep 28 '22 03:09

Andre Breton