Unexperienced experience and personal view below, forgive where you are wrong, let's start with a simple implementation
1. Connection

https://github.com/airbnb/lottie-android

2. Layout implementation

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#50000000"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

Add a background color (which is important for the demonstration below), lottie_fileName, a json file in assets (you can make it on github above with someone else), make it yourself, use the After Effects tool to make this animation, install a plug-in called Bodymovin in AE, and use this plug-in to generate a json for the animation effectfile

The animation effect at this time.

The animation comes out, can't the human-computer interaction be done, this is very important, let's add a click event

animation_view.setOnClickListener(new View.OnClickListener()
{
     @Override
     public void onClick(View v)
     {
        Toast.makeText(MainActivity.this,"Watermelon"+i++,Toast.LENGTH_SHORT).show();
     }
});

Yes, there are click events, and all gray areas can be clicked, which is obviously the click area of the current control. You can see the principle here: Create a control and then use it to display the animation, which is equivalent to a video player.This is already different from what we understand about animation.Let's take a look at the size, regardless of the animation.

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#50000000"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

First try a width of 200dp

What is this TM ghost that captures the middle part of the width to show the animation, but the size doesn't change?I'll try height again

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:background="#50000000"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

Still 200dp

.....Let's adjust it all

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#50000000"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

Finally, it gets bigger, so the principle of getting bigger is to define the size of the animation according to the minimum width and height. This will cause a problem, there will be redundant areas, so how to solve the size and click on the event area, I don't know...... but when our animation doesn't click on events, this control is great. The background is transparent and no one can see the real size of our control. Ha-ha, smart.Include a Motion Mapping website to help thieves https://ezgif.com/video-to-gif