Table of Contents

1. Early days of Dynamic Animation
2. Producing Animation
3. Emergence of Lottie
4. After Effects and Bodymovin
5. Bodymovin JSON attributes
6. Layers
7. Core Classes of Lottie
8. Screen Adaptation of Lottie Animations
9. Overview
10. References
11. Contributions

Understanding the internals of Lottie-Android and the workflow of Loading and Rendering the Animation file blog post aims to be the starting point for developers to get familiar with the core classes, methods of Lottie source code plus the understanding of Bodymovin which exports JSON required by Lottie to work.

Early days of Dynamic Animation

In the year 2014 with the release of Android 5.0 (API 21) Lollipop, Android supported Vector Drawables and Animated Vector Drawables.

But even with the support for Animated Vector Drawables, making dynamic vector animation was not easy. It couldn't be loaded programmatically or over the internet.

Moreover, it had issues with resolving vector path transformation animation in Android 4.x

Producing Animation

Some other ways to produce the animation effect were:

Using gifs: Gifs are rendered at a fixed size that can't be scaled up to match large and high-density screens. They were not an ideal replacement.

Using image sequences: One of the ways to achieve animation effect is to divide the animation into multiple pictures, and then periodically replace the pictures drawn on the screen to form the animation. This method is very simple, but the shortcomings are obvious. Very memory consuming, so it wasn't recommended.

Facebook Keyframes: They are now deprecated and had a limited feature set. So, not a very ideal choice either.

https://github.com/facebookarchive/Keyframes

The direct consequence of the above is that there was not a hint of dynamic vector animation in almost all the major apps, but until the emergence of Lottie.

Emergence of Lottie

Lottie is an animation rendering library open-sourced by Airbnb. With Android, it also supports iOS, React Native, Windows, and Web platforms.

Lottie currently supports rendering and playing After Effects animations. Lottie uses the JSON data exported by bodymovin, an After Effects plug-in as the animation data source.

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

After Effects and Bodymovin

https://www.adobe.com/in/products/aftereffects.html
https://github.com/airbnb/lottie-web

bodymovin plug-in is an open-source library used to present various AE effects on the web.

The high-level workflow from after effects to rendering on the device is shown:

Designers use After Effects to make animations and export JSON files. We can put the JSON file on the svg-sprite Lottie-Player and run it to see the effect.

The resources used by Lottie need to first convert the aep (After Effects Project) file generated by Adobe After Effects into a general JSON format file through bodymovin

bodymovin exports the After Effects animation as a description of the animation, and the job of lottie-android is to translate the described animation with native code, and its core principle is canvas drawing.

Lottie's animation is drawn by a pure canvas.

The bodymovin export contains all the information of the animation, the keyframe information of the animation, how to do the animation, and what to do.

All the data of the Model in Lottie comes from this bodymovin exported JSON (the corresponding Model is LottieComposition).

Bodymovin JSON attributes

https://github.com/airbnb/lottie-web/tree/master/docs/json

There are many attributes. Few are listed:

The outermost layer looks like this:

The meaning of the attribute:

v = version of bodymovin

fr = Frame rate

ip = Start keyframe

op = End keyframe

w = Animation width

h = Animation height

assets = Animated picture resource information

layers = Animation layer information

From here, you can get the width and height of the designed animation, frame-related information, information on the image resources needed by the animation, and layer information.

Inside assets

Image resource information.

related classes: LottieImageAsset, ImageAssetBitmapManager.

The meaning of the attribute:

id = Picture id

w = Picture width

h = Picture height

p = Picture name

Inside layers

Layer information.

related classes: BaseLayer.

The meaning of the attribute:

nm = Layer name

refId = Resource id

ind = Layer id

ip = The starting keyframe of the layer

op = The ending keyframe of the layer

st = Start Time

Lottie is responsible for analyzing the animation data coming through JSON, calculating the state of each animation at a certain point in time, and accurately drawing it on the screen.

Layers

To understand Lottie animation rendering, we must first understand an important concept in After Effects: Layer

In After Effects, the concept of layers is similar to the concept of layers in Photoshop: layers are equivalent to a more fine-grained distinction for the overall image of the animation, and different types of elements are split with different shapes and solid colors.

Elements such as text, etc. are located in different layers, and all layers are superimposed in sequence to form the rendered image.

Modifying the properties of a layer will not affect other layers so that when performing animation, it is possible to perform different animation logic on each element in the image more clearly.

In Lottie, the concept of layers is abstracted into 6 classes in BaseLayer:

1. ShapeLayer

2. CompositionLayer

3. SolidLayer

4. ImageLayer

5. NullLayer

6. TextLayer

The corresponding relationship between them and the layers in After Effects is:

ShapeLayer: Shape layer

CompositionLayer: Precompose layer

SolidLayer: Solid-color Layer

ImageLayer: Image material layer

NullLayer: Empty layer

TextLayer: Text layer

https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/model/layer/BaseLayer.java

Core Classes of Lottie

The following is a description of the three core classes in Lottie-Android:

a) LottieComposition (which converts JSON to data object)

b) LottieDrawable (which converts data Object to Drawable)

c) LottieAnimationView (performs drawing)

The data in the JSON file is converted into a LottieComposition data object. This class provides a static method for parsing JSON.

https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/LottieComposition.java

LottieDrawable is responsible for drawing the data into a drawable. LottieDrawable inherits from Drawable.

https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java

LottieAnimationView inherits from AppCompatImageView. LottieAnimationView is responsible for displaying the LottieDrawable.

https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/LottieAnimationView.java

Screen Adaptation of Lottie Animations

Lottie has already done the adaptation work on the Android platform.

When parsing, the width and height will be multiplied by the density of the phone after reading the width and height. When using it, it decides whether the adapted width and height exceed the width and height of the screen and if it exceeds, then zooms. This guarantees Lottie's proper display effect on the Android platform.

Lottie converts all px values to dp.

Overview

With Lottie, as long as designers use After Effects to design animations, export them with bodymovin, import them into assets, and write the following code to achieve it or simply add in XML then there is no need to write custom View nor to draw a Path and nor to calculate the points!

References

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

https://github.com/bodymovin/bodymovin/tree/master/docs/json

https://helpx.adobe.com/after-effects/using/creating-layers.html

Relevant Video on "Awesome Dev Notes" YouTube

Contributions

Contributions and Pull requests are welcomed at https://github.com/androiddevnotes repositories!

🐣

Authors

---

Android Dev Notes

github.com/androiddevnotes

Open-source contributor