To introduce

Address on GayHub: Lottie – Android renderings

Use it in Android projects

First, introduce dependencies in your project’s build.gradle file:

 implementation 'com. Reality. The android: Lottie: 2.5.4'
Copy the code

Then, create an Assets folder under the Main folder to put the animation file (a JSON file). This animation file is usually created by the designer using Adobe’s After Effects (After Effects for short) to create an animation. After AE, you can import a plug-in called Bodymovin to AE, which can directly export the JSON file based on the animation file. This JSON file describes the coordinates and trajectories of some of the key points of the animation. I didn’t have a designer when I used it, and I don’t know how to use AE, so I recommend lottiefiles, which has lots of animation files to download. Now we’re officially using animation. There are two ways: first, use it directly in the layout file.

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"// Animation file app:lottie_rawRes= in res/raw"@raw/hello_world"// Animation file app in Assets :lottie_fileName="hello_world.json"// Start loop app:lottie_loop="true"// App :lottie_autoPlay="true" />
Copy the code

The second is used in Java code

    LottieAnimationView animationView = findViewById(R.id.animation_view);
    animationView.setAnimation(R.raw.hello_world);
    // or
    animationView.setAnimation(R.raw.hello_world.json);
    animationView.playAnimation();
Copy the code

Ok, so let’s run the project. Then you will find the miracle, not a picture, not a GIF, but animation! It’s that simple, it’s that violent!

Common methods

  • LottieAnimationView.loop(true); Set up the animation loop.
  • mLottieAnimationView.isAnimating(); Whether it’s in the demo.
  • MLottieAnimationView. SetProgress (0.5 f); Set the progress of the presentation.
  • mLottieAnimationView.getProgress(); Get the progress of the presentation.
  • mLottieAnimationView.getDuration(); Get the time of the presentation.
  • mLottieAnimationView.playAnimation(); Run the animation.
  • mLottieAnimationView.pauseAnimation(); Pause the animation.
  • mLottieAnimationView.cancelAnimation(); Close the animation.

The end of the

All right, that’s all I’ve seen. The rest won’t.

Lottie– Make animation so simple