Lottie is a recent Airbnb open source animation project that supports Android, iOS, and ReactNaitve platforms. For background information, please refer to the previous article about Airbnb open Source Cool animation Library Lottie (translated by Airbnb engineers). This article analyzes the main Lottie json file into animation ideas and source code implementation.

This article first introduces the basic use of Lottie, and then analyzes the implementation ideas of mapping JSON files to animation, and finally analyzes the source code implementation of Lottie, which is lottie-Android.

Basic usage

There are only three class files associated with usage: LottieAnimationView, LottieComposition, and LottieDrawable, so Lottie is particularly simple to use (note that Lottie supports API16 and above). The simplest way to use it is to add LottieAnimationView to XML:

“Logo/LogoSmall. Json “is the animation data path to be loaded. The root directory is the assets directory.

You can also set the animation data JSON path with code:

Then control the animation in your code or add a listening event:

Lottie provides Lottie Edrawable that can be used:

It can be seen that Lottie is very simple to use. We will analyze the implementation principle of Lottie animation from the LottieAnimationView, Lottie ecomPosition and Lottie EdRawable used above.

Thought analysis

Let’s start with the underlying thinking about how to draw on the screen animation, the simplest way is to put the animation is divided into multiple pictures, and then through the cycle form animated drawings to replace the screen, this kind of violence the way is very simple, but disadvantages clearly, is in memory, flash before and after the two replacement images in many elements do not change, repetition is a waste of space.

In order to improve the utilization of space, you can split the elements in the image. Those of you who have used Photoshop know that in fact, when processing an image, you can use multiple layers to represent a complex image, with each layer showing part of the content, and the content in the layer can also be split into multiple elements. After splitting the elements, depending on the animation requirements, you can animate the layer or even the elements in the layer by translation, rotation, contraction, etc.

Lottie uses JSON files as the animation data source. The JSON files are exported through the Bodymovin plug-in. Looking at the JSON files given in the sample, they actually split the elements in the picture and describe the animation execution path and execution time of each element. Lottie’s function is to read this data and draw it onto the screen.

Now let’s think about how we would display a JSON animation on the screen if we had it. The first step is to parse the JSON, establish the mapping of the data to the object, and then create the appropriate Drawable based on the data object to draw on the View. The animation can be implemented by manipulating the read elements.

Source code analysis

1. Mapping json files to objects

Lottie uses LottieComposition as a data object for After Effects. That is, a JSON file is mapped to LottieComposition, which provides a static method for parsing JSON:

Let’s take a look at what member variables LottieComposition has that describe the animation in After Effects.

You can see that startFrame, endFrame, Duration, Scale, and so on are common in animation. List

= List

Complete json data parsing in Layer:

2. Mapping data objects to Drawable

AnimatableLayer is derived from Drawable. Let’s look at its subclasses:

Among themLayerViewCorresponds to theLayerThe data,LayerThere are



The correspondingLayerViewThere are

ViewGroup can contain ViewGroup or View, but the entire Lottie implementation animation is drawn on a View LottieAnimationView.

Other subclasses of AnimatableLayer such as ShapeLayer, RectLayouer, etc. are used as elements of List

in LayerView.

3. Draw

LottieAnimationView inherits from AppCompatImageView and encapsulates some animation operations, such as:

The specific draw delegate is LottieDrawable. Let’s look at the Draw () method in LottieDrawable:

LottieDrawableInherited fromAnimatableLayer, itsdraw()The method is as follows:

You can see that the contents of this layer are drawn first, and then the contents of the contained layers are drawn:

This process is similar to nested drawing of viewGroups in an interface.

4. Implementation analysis

Above, we analyzed the Lottie implementation mechanism according to the ideas of animation drawing. Here is the implementation process of the program from the front: 1. Create LottieAnimationView 2. Create LottieDrawable 3. Create LottieComposition LottieComposition using static methods in LottieComposition to parse the JSON file. Multiple Layer objects have been created during this process. 4. lottieDrawable.setComposition(lottieComposition)

Cleaning before data first, and then start buildLayersForComposition, namely according to establish multiple layerView lottieComposition, already created multiple Drawable, List is a drawable tree with lottieDrawable as the root.

  1. lottieAnimationView.setImageDrawable(lottieDrawable)

  2. lottieAnimationView.playAnimation()

Private Final ValueAnimator animator = ValueAnimator.offloat (0f, 1f);

Let’s focus on the setProgress method

Private Final List

> animations = setProgress of new ArrayList<>() :
>

During onValueChanged, each Drawable created will be redrawn as required to animate.

Lottie moves the animation from View motion to Drawable.

Lottie’s performance

As you can see, Lottie maps jSON-based animation data to Drawable, uses ValueAnimator for animation implementation, and uses Drawable instead of View for animation updates. I feel that Drawable is lighter than View when no interaction is required. Here is the official description of Lottie’s performance:

  1. Without masks and Mattes, performance and memory are great, no bitmap is created, and most operations are simple Cavas drawing.

  2. If mattes exist, 2 or 3 bitmaps will be created. Bitmaps are created when the animation is loaded into the window and reclaimed when the window is deleted. Therefore, it is not suitable to use animation containing Mattes or mask in RecyclerView, otherwise it will cause bitmap jitter. In addition to memory jitter, the necessary bitmap.erasecolor () and Canvas.drawbitmap () in mattes and Masks also reduce animation performance. For simple animations, the performance is not obvious in practical use.

  3. If the use of animation in the list, it is recommended to use the cache LottieAnimationView. SetAnimation (String, CacheStrategy).

Please pay attention to the public account Wutongke, and push the cutting-edge technology articles of mobile development every day:


Recommended reading:


Airbnb’s Open Source library of cool animations Lottie (Translation) – What do Airbnb engineers say

Write efficient Android code

One tip for using Gradient in Android