Talk about Airbnb Lottie from Android development perspective!!

One, foreword

Have you ever met a designer who is fascinated with cool animations and loves to design cute and smooth animations based on the scene? In practice, even developers think these animations are great, but we know that the more customized animations are, the more difficult and time-consuming they are to implement. This can sometimes lead to friction between designers and engineers.

Since Airbnb developed Lottie, designers only need to design perfect animations using After Effects, and then simply convert and export them into JSON through Bodymovin. Finally, engineers put JSON into the App project. You can restore the animation 100% to your product.

2. Why Lottie?

Lottie is a complete, cross-platform solution. After Effectes design an animation, use Lottic Bodymovin to export the animation into JSON format. It works directly with iOS, Android, and React Native, and doesn’t need to worry about implementation details.

Lottie gives you a cleaner workflow for different work roles.

If you are Designer, you can give full play to your animation design talents, because they will be restored 100% in the end.
If you are Engineer, you can do the animations required by the designer with simple import and limited code, and Lottie is not bloated.
If you are a Product Manager, your Product will have more user-friendly cool dazzle animation, and this will not lead to a longer development cycle.

Overall, Lottie is an excellent project that solves a lot of communication problems and provides solutions for animation. But it still has some disadvantages:

System version restrictions, Android (Api 14+) and iOS(>=8.0) have different version restrictions.
Some interactive animations are not supported and cannot be executed even if exported.
The Bodymovin plugin is still a work in progress. Some Effects implemented in After Effects cannot be exported properly.

Today, let’s take a look at using Lottie from an Android engineer’s perspective. Here we only talk about using Lottie in Android, how to edit animations, how to install plug-ins, these are all designers need to care about, for us, we get a Lottie animation JSON file, we only need to care about how to use it.

3. Use Lottie on Android

3.1 Starting use

Lottie supports Gradle build configurations and only Gradle builds, so a simple import in the build. Gradle file is all we need.

The simplest way to use it is to use LottieAnimationView directly, which inherits directly from AppCompatImageView.

You only need to place the animation JSON file in the app/ SRC /main/ Assets directory in advance and use it in the Layout file.

It supports several properties:

Lottie_fileName: json file to play animation.
Lottie_loop: whether to play in a loop. The default value is false.
Lottie_autoPlay: Whether to automatically play after loading. Default is false.

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

This method loads the JSON file, parses the animation, and then starts rendering the animation asynchronously in the child thread.

3.2 Loading Lotties from other sources

Our Lottie animation JSON can be loaded from anywhere, it will need to use to LottieComposition. The Factory this class for the different sources of JSON file. In the Factory, a number of fromXxx() methods are provided for loading JSON for animations.

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

The fromXxx() method, which returns a Cancellable interface identifying it as a Cancellable method, can call its cancel() method if necessary.

Lottie’s animation loader, with many fromXxx() methods, ends up pointing to FileCompositionLoader and JsonCompositionLoader, both of which inherit from AsyncTask. Cancel () cancels the execution of the AsyncTask. If you are interested, check the source code.

3.3 Monitoring of Lottie animation

Lottie, as an animation, also provides listeners to listen for animation execution.

Want to monitor the animation, for example, the beginning of the end state, such as can use addAnimatorListener () method, it accepts an Animator. AnimatorListener () interface, we only need to implement the corresponding method.

But if we want to monitor Lottie animation in the middle of the state, such as the progress of the execution and so on, can use addAnimatorUpdateListener ().

Progress control is very useful because some animations, such as a progress bar animation, are very important.

3.4 Control the speed and time of Lottie animation execution

After Lottie animation is exported to JSON, the speed and duration of animation execution are fixed. If you want to modify these two parameters, you can use ValueAniamtor with setProgress() instead of using After Effects to modify them and export them.

3.5 Use Lottie Edrawable directly

LottieAnimationView actually uses LottieDrawable internally, you can use it directly if you need to.

3.6 There are pictures in animation

Sometimes, our animations are not only drawn, but may also use some image resources. If this is the case, you can use setImageAssetsFolder() to set a relative path to the image folders used in Lottie animations, and ensure that they and the name of the image file used in the bodyMovin output remain the same.

If you need to load images, you can use LottieAnimationView and you don’t need any extra processing, but if you use LottieDrawable, you need to manually recycleBitmaps() after using it.

If we need to configure the location of an image, such as an image downloaded from the network, we can use an ImageAssetDelegate to support this.

Four, check gaps and fill gaps

Lottie official provides an App that can be used to load a Lottie animation, which is very useful in troubleshooting problems. It is recommended that you install and play Lottie if you use it. Lottie.Apk needs to be downloaded on Google Play. If it is not convenient to download, you can reply “LottieAPk” on the official account and directly download the Apk file.

4.1 performance

Since it is animation, there must be performance requirements. You can use Lottie App to see the performance issues of animation execution, just to see the effect.

4.2 Troubleshooting

Sometimes, designers design animations that have effects that Lottie cannot reproduce. In such cases, you can call getWarning() in your code to get the warning details of the animation.

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

5. Animation resources

If for some reason you can’t have a designer customize the animations for your App, you can also try to find some of Lottie’s animations available online. LottieFiles is recommended.

LottieFiles:

https://www.lottiefiles.com/

LottieFiles provides many small animation effects that can be downloaded directly into JSON or generated into a QR code that Lottie App can scan to see the effects.

The effects on LottieFiles, while very useful, the only problem is that basically we as engineers can’t edit them, so we have to apply them.

Six, the summary

All the details of Android’s use of Lottie have been covered in this article, but you can only read the documentation or check the official documentation for more details.

Lottie lot:

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

Official Lottie documentation:

http://airbnb.io/lottie/

Do you have any problems with Lottie? You can discuss it in the comments section.

Today in the background of chengxiang Ink shadow public account, reply “growth”. I will send you some of my collation of learning materials, including: Android decompile, algorithm, design pattern, virtual machine, Linux, Kotlin, Python, crawler, Web project source.