How to know when a Lottie animation is completed?

Question

I have a fragment, here is the onCreateView method:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
    // Inflate the layout for this fragment
    mView = inflater.inflate(R.layout.fragment_added_to_cart_anim, container, false);
    ButterKnife.bind(this, mView);

    mAddedToCartAnimation.setAnimation("checked_done_.json");
    mAddedToCartAnimation.loop(false);
    mAddedToCartAnimation.playAnimation();

    // Remove fragment when the animation is finished.

    return mView;

}

I need to remove the fragment using getActivity().getSupportFragmentManager().beginTransaction().remove(this).commit(); when the lottie animation has ended. If I understand correctly when the isAnimating() Lottie method returns false the animation has ended and since in my configuration the animation does not loop this is when I should remove the current fragment. But I can't just use an if statement since when it is executed the animation may still be going.

I need a way to remove the fragment when the Lottie animation ends, how do I do this?

Caton

Answer 1

This code works for me:

mAddedToCartAnimation.addAnimatorListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            Log.e("Animation:","start");
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            Log.e("Animation:","end");
            //Your code for remove the fragment
            try {
                getActivity().getSupportFragmentManager()
                      .beginTransaction().remove(this).commit();
            } catch(Exception ex) {
                ex.toString();
            }
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            Log.e("Animation:","cancel");
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
            Log.e("Animation:","repeat");
        }
    });

I hope this solve your problem :)

Rusert

@Rusert : on First animation end , I tried running the second animation. but the second animation keep's looping after it completes its first round. is there any other way in which the chain animations can be achieved? – Vicenary

Note: If you have made the visibility of the Lottie view as Invisible or gone, the animation listener won't be triggered – Wallah

does this have equivalent code for angular? – Byelostok

I don't have experience with Lottie and Angular but maybe the "complete" callback can help you CC @Byelostok npmjs.com/package/ngx-lottie#api – Rusert

Answer 2

Kotlin Code for animation complete :

successAnimation.addAnimatorListener(object : Animator.AnimatorListener{
            override fun onAnimationRepeat(animation: Animator?) {
            }

            override fun onAnimationEnd(animation: Animator?) {
                //Add your code here for animation end
            }

            override fun onAnimationCancel(animation: Animator?) {
            }

            override fun onAnimationStart(animation: Animator?) {
            }

        })

Bunyan

Answer 3

In Kotlin , you can this way:

val lotWelcome=findViewById<LottieAnimationView>(R.id.lot_1) 
   
lotWelcome.addAnimatorListener(object : Animator.AnimatorListener {
       override fun onAnimationStart(animation: Animator) {
           Log.e("Animation:", "start")
       }
   override fun onAnimationEnd(animation: Animator) {
       Log.e("Animation:", "end")
       //Ex: here the layout is removed!
       firstScreen.visibility= View.GONE
   }

   override fun onAnimationCancel(animation: Animator) {
       Log.e("Animation:", "cancel")
   }

   override fun onAnimationRepeat(animation: Animator) {
       Log.e("Animation:", "repeat")
   }

  })

By the way , you can see the original document here: https://airbnb.io/lottie/#/android

Bogbean