From the perspective of Android development, let’s talk about Airbnb’s Lottie!!!

1. Introduction

Have you ever met some designers who are obsessed with cool animations and like to design cute and smooth animations according to the scene? But in actual work, even if developers think these animations are great, we know that the more customized the animations are, the more troublesome and time-consuming it will be to implement. This sometimes causes conflicts between designers and engineers.

[[213433]]

Since Airbnb developed Lottie, designers only need to use After Effects to design the latest animation, and then use the Bodymovin plug-in to perform a simple conversion and export it to JSON. The latest engineer puts the JSON into the App project and the animation can be 100% restored to your product.

2. Why use Lottie?

Lottie is a complete cross-platform solution. Designers only need to use After Effects to design the animation, and then use Bodymovin provided by Lottic to export the designed animation into JSON format. It can then be directly used on iOS, Android and React Native without having to worry about the implementation details in the middle.

For different work roles, Lottie brings you a simpler workflow.

• If you are a Designer, you can give full play to your animation design talent because they will eventually be 100% restored.
• If you are an Engineer, you can achieve the animation required by the designer through simple import and limited code, and Lottie is not bloated.
• If you are a Product Manager, your product will have more humanized cool animations, which will not extend the development cycle.

Overall, Lottie is an excellent project that can solve many communication problems and provide solutions for animation. However, it still has some shortcomings:

• System version restrictions: Android (Api 14+) and iOS (>=8.0) have different version restrictions.
• Some interactive animations are not supported and cannot be executed normally even if they are exported.
• The Bodymovin plug-in still needs to be improved, and some effects implemented in After Effects cannot be exported normally.

Today, we will take a look at how to use Lottie from the perspective of an Android engineer. Here we will only talk about using Lottie on Android, how to edit animations, and how to install plugins. These are all things that designers need to care about. For us, what we get is a JSON file of a Lottie animation, and we only need to care about how to use it.

3. Using Lottie on Android

3.1 Getting Started

Lottie can and only supports Gradle for build configuration, so we only need to do a simple import in the build.gradle file.

The easiest way to use it is to use LottieAnimationView directly. LottieAnimationView inherits directly from AppCompatImageView.

Just put the animation JSON file in the app/src/main/assets directory in advance and use it directly in the Layout file.

It supports several properties:

• lottie_fileName : The json file for playing animation.
• lottie_loop: Whether to play in a loop, the default is false.
• lottie_autoPlay: Whether to play automatically after loading is complete. The default value is false.

Of course, you can also use logic code to control the playback of Lottie animation, which is also very simple to use.

This method will load the JSON file, parse the animation, and then start asynchronously rendering the animation in a child thread.

3.2 Loading Lottie from other sources

Our Lottie animation JSON can be loaded from anywhere, so we need to use the LottieComposition.Factory class to load JSON files from different sources. In this Factory, many fromXxx() methods are provided for loading animation JSON.

A common way is to load a Lottie animation from a JSONObject.

The fromXxx() method returns a Cancellable interface, indicating that it is a cancelable method. If necessary, you can call its cancel() method.

Lottie's animation loader has many fromXxx() methods, but they all point to FileCompositionLoader and JsonCompositionLoader. Both loaders inherit from AsyncTask, so the cancel() method actually cancels the execution of this AsyncTask. If you are interested, you can check the source code for this.

3.3 Lottie animation monitoring

As an animation, Lottie also provides some listeners for monitoring the execution of animation.

For example, if you want to monitor the start and end of an animation, you can use the addAnimatorListener() method, which accepts an Animator.AnimatorListener() interface. We only need to implement the corresponding method.

If we want to monitor the intermediate states of Lottie animation, such as the progress of execution, etc., we can use addAnimatorUpdateListener().

Controlling progress is very useful, because for some animations, such as the animation of a progress bar, controlling progress is very important.

3.4 Controlling the speed and timing of Lottie animation execution

After Lottie animation is exported to JSON, the speed and duration of the animation are fixed. So if you want to modify these two parameters, in addition to asking the designer to use After Effects to modify it again and then export it, you can also use ValueAniamtor with the setProgress() method to achieve it.

3.5 Using LottieDrawable directly

LottieAnimationView actually uses LottieDrawable internally, but you can use it directly if needed.

3.6 There are pictures in the animation

Sometimes, our animation is not just about drawing, but may also use some image resources. If you encounter such a situation and use local resource images, you can use setImageAssetsFolder() to set a relative path to the image folder used in the Lottie animation, and make sure that they and the image file names used by the bodymovin plugin output remain unchanged.

If you need to load images, you can use LottieAnimationView without any extra processing. However, if you use LottieDrawable directly, you need to manually call recycleBitmaps() to recycle resources after use.

If we need to configure the location of the image ourselves, for example, if the image is downloaded from the Internet, we can use an ImageAssetDelegate to support it.

4. Check for deficiencies and fill in the gaps

Lottie officially provides an App that can be used to load a Lottie animation. It is very useful in troubleshooting. If you use Lottie, it is recommended to install it first and play with it. Lottie.Apk needs to be downloaded from Google Play. If it is not convenient to download, you can reply "lottieapk" in the official account to download the Apk file directly.

4.1 Performance

Since it is an animation, there must be performance requirements. You can use Lottie App to check the performance issues of animation execution and just look at the effect directly.

4.2 Troubleshooting

Sometimes, some effects of animations designed by designers cannot be restored by Lottie. In such cases, you can call getWarning() in the code to get the detailed warning output of the animation.

Another way is to load the JSON file provided by the designer directly in the official Lottie.App. If an error occurs, there will be a warning mark in the upper right corner. Click it to view the details.

5. Animation resources

If you are unable to hire a designer to customize the animation effects for your app for various reasons, you can also try to find some Lottie animation effects that are publicly available online. We recommend using the LottieFiles website.

• LottieFiles:
• https://www.lottiefiles.com/

LottieFiles provides many small animation effects, and can be directly downloaded as JSON, or generate a QR code for the Lottie App to scan and see the effect.

The effects on LottieFiles, although very useful, the only problem is that basically, as engineers, we cannot edit them, so we can only apply the effects.

VI. Summary

This article has explained all the details of how Android uses Lottie. If there are still details to know, you can only read the documentation or check the official documentation.

• Lottie Github:
• https://github.com/airbnb/lot…
• Lottie official documentation:
• http://airbnb.io/lottie/

Regarding Lottie, have you encountered any problems while using it? You can leave a message in the comment area to discuss it together.