How to know when a Lottie animation is completed?

When using Lottie animations, it's crucial to know when an animation completes to perform subsequent actions, such as navigating to another page or displaying a notification. Lottie provides a convenient listener to help developers detect when an animation completes.

For example, on Android, you can add an AnimatorListener to your LottieAnimationView to achieve this. Below is a simple example demonstrating how to set up the listener and respond to the animation completion event:

java
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("example_animation.json");
animationView.addAnimatorListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
        // Animation starts
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        // Animation ends; navigate to another activity
        startActivity(new Intent(CurrentActivity.this, NextActivity.class));
    }

    @Override
    public void onAnimationCancel(Animator animation) {
        // Animation canceled
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        // Animation repeats
    }
});

animationView.playAnimation();

In the code above, we add an AnimatorListener to the LottieAnimationView and override the onAnimationEnd method to handle the logic after the animation completes. Within this method, you can perform any actions needed after the animation finishes, such as navigating to another activity as shown in the example above.

Additionally, if you're using the iOS or Web versions of Lottie, similar methods exist to listen for animation completion. On iOS, you can use LottieCompletionBlock, while on Web, you can use the addEventListener method to listen for the complete event.

This listener mechanism is very useful, especially when handling user interactions or complex dynamic interfaces. By listening for animation completion, we can ensure smooth and effective control of the user interface flow.