From the perspective of Android development, talk about Airbnb's lottie!!!

First, preface

Have you ever met some designers, fascinated by some cool animations, and loved to design cute and fluid animations based on the scene? But in real-world work, even developers think these animations are great, but we know that the more customized the animation, the more cumbersome and time-consuming it will be to achieve it. This sometimes leads to contradictions between designers and engineers.

And since Airbnb developed the Lottie, designers only need to use after Effects to design the perfect animation, and then through the Bodymovin plug-in simple conversion and export to JSON, finally the engineer put the JSON into the APP project, you can animate 1 0% revert to your product.

Second, why use Lottie?

Lottie is a complete cross-platform solution, designers only need to use after effectes to design the animation, using the lottic provided by the Bodymovin to export the design of the animation into a JSON format, you can directly apply to IOS, Android and Rea On CT native, there is no need to care about intermediate implementation details.

For different job roles, Lottie brings you a cleaner workflow.

• If you are designer, you can give full play to your animation design talent, because they will eventually be 100% of the restoration.
• If you are a Engineer, you can implement the animation required by the designer through simple import and limited code, and the Lottie is not bloated.
• If you are product Manager, your products will be more user-friendly and cool animations, and this will not lead to a longer development cycle.

Overall, Lottie is an excellent project that solves many of the communication problems and solutions on the animation. But it still has some shortcomings:

1. System version limitations, Android (Api 14+) and IOS (>=8.0) have different version limits.
2. There are some interactive animations that are not supported and cannot be executed properly even if exported.
3. Bodymovin plug-ins are yet to be perfected, and some of the effects implemented by after effects cannot be exported normally.

And today, we stand in the perspective of an Android engineer to see how to use Lottie. This is only for Android under the use of Lottie, how to edit animation, how to install plug-ins, these are the designers need to care about, for us, get a Lottie animation JSON file, we only need to care about how to use it.

Third, use Lottie3.1 to start using Android

Lottie can support and support only Gradle for build configurations, so we just need to do a simple import in the Build.gradle file.

The simplest way to use it is to use Lottieanimationview directly, Lottieanimationview directly inherits from Appcompatimageview.

Only need to advance the animation JSON file, placed in the App/src/main/assets directory, in the layout file, you can directly use.

It supports several properties:

• Lottie_filename: The JSON file that plays the animation.
• Lottie_loop: Whether to loop playback, the default is False.
• Lottie_autoplay: Auto play after loading is complete, default to False.

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

This method loads the JSON file, parses the animation, and begins the asynchronous rendering of the animation in the child thread.

3.2 Loading Lottie from other sources

The JSON of our Lottie animations can be loaded from anywhere, and here we need to use the Lottiecomposition.factory class to load JSON files from different sources. In this Factory, there are many fromXxx() ways to load the JSON of the animation.

A more common way, such as we load Lottie animations from a jsonobject.

fromXxx()method, it returns a cancellable interface that identifies it as a method that can be canceled, and can call its method if necessary cancel() .

Lottie Animation loader, looking at a lot of fromXxx() methods, in fact, the final point is Filecompositionloader and Jsoncompositionloader, the two loaders, are inherited from Asynctask, so cancel() Square Law is actually the abolition of the implementation of this asynctask, interested in the source can be consulted in this respect.

3.3 Lottie Animation monitoring

Lottie, as an animation, also provides a number of listeners to monitor the execution of the animation.

For example, to listen to the beginning and end of an animation, you can use the addAnimatorListener() method, which accepts an Animator.AnimatorListener() interface, and we just need to implement the corresponding method.

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

Control progress is very useful, because there are some animations, such as the animation of a progress bar, the control of progress is very important.

3.4 Controlling the speed and time of Lottie animation execution

Lottie animation, after exporting to JSON, in fact, the speed and length of animation execution, are already fixed. So if you want to modify both of these parameters, you can use the Valueaniamtor mate method, in addition to troublesome designers using after Effects to re-modify and then export setProgress() .

3.5 Direct use of lottiedrawable

Lottieanimationview is actually used internally by lottiedrawable, and you can use it directly if you need it.

There are pictures in the 3.6 animation

Sometimes, our animations are more than just pictures, and there may be some image resources to use. If this is the case and you are using a local resource picture, you can use the setImageAssetsFolder() relative path of the picture folder that you use to set up a Lottie animation, and make sure that they and the Bodymovin plugin output have the same image file name that they used to keep intact.

If you need to load the picture, you can use Lottieanimationview to be very worry, do not need extra processing, but if you use lottiedrawable directly, after the use is completed, you need to manually invoke the recycleBitmaps() resource recycling.

And if we need to configure the location of the image, for example, a picture downloaded from the network, you can use a imageassetdelegate to support it.

Iv. Check Gaps

Lottie officially provides an App that can be used to load a Lottie animation, which is useful in troubleshooting problems, and it is recommended that you use Lottie if you want to install it. lottie.apk need to go to Google Play downloaded, inconvenient to download the public number can reply "lottieapk", download the Apk file directly.

4.1 Performance

Since is the animation, certainly has the performance request. You can use the Lottie App to see the performance problems of animation execution, directly look at the effect is good.

4.2 Troubleshooting

Sometimes, the designer of the animation, some effects can not be Lottie to restore. In this case, you can call the getWarning() get animated warning verbose output in your code.

Another way is to load the JSON file provided by the designer directly in the official Lottie.app, if there is an error, there will be a warning mark in the upper right corner, click to see the details.

Five, animation resources

If you have no way to customize the animation for your App for a variety of reasons, you can also try to find some of the Lottie animations that are exposed online, and it's recommended to use the Lottiefiles site.

Lottiefiles:

https://www.lottiefiles.com/

Lottiefiles provides a lot of small animation effects, and can be downloaded directly into JSON, or generate two-dimensional code, for the Lottie App scan to see the effect.

Lottiefiles on the effect, although very useful, the only problem is basically, we as an engineer is not editable, so only to apply the effect.

Vi. Summary

Android uses all the details of Lottie, this article has been made clear, there are details to understand, you can only read the document, or view the official documents.

Lottie Github:

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

Lottie Official documents:

http://airbnb.io/lottie/

About Lottie, have you encountered any pits in the process of use? Can be discussed in the message area with a message.

Today, in the background of incense Ink Shadow Public, reply to " growth ". I will send you some of my study materials, including: Android Anti-compilation, algorithm, design mode, virtual machine, Linux, Kotlin, Python, crawler, Web project source code.

Recommended reading:

• Drawable these common tips to improve the development efficiency!
• Android Soft keyboard display and hide, so the operation is right
• Android Anti-compilation weapon, JADX advanced tricks
• 6 Simple tips on how to write clean Code
• Handwriting your first Dalvik version of HelloWorld!

From the perspective of Android development, talk about Airbnb's lottie!!!