Lottie Animation Introduction

1. Dilemma

Doing animations, inevitably have similar experiences:

Digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference

Imitating from GIF images/effect videos, guessing animation duration, manually creating Bézier curves... repeatedly adjusting parameters, visually measuring effects over and over, finally discover:

• There are many detail differences

• Effects are not delicate enough

• Due to compatibility and other constraints, some effects cannot be implemented

Finally implemented with great difficulty, but fidelity doesn't meet requirements. Usually either designer compromises, or sit together and adjust for another half day, modify until the other party is satisfied, result is time spent adjusting details is several times more than expected, effect is still barely satisfactory

Experienced designers will copy some useful information from AE (Adobe After Effects), such as Bézier curve parameters, animation duration... even can provide some implementation ideas, but anyway, implementing animations from video is like copying, effect differences are almost inevitable. Thinking carefully about this process, animations have considerable workload for designers, but engineers seem to have even greater workload, each target platform has a workload, and these work are one-time, almost cannot be reused and difficult to maintain (find a certain parameter from hundreds of lines of parallel, serial animation sequences, add a 0.1)

Then, why copy several times after a painting is completed? Can we reduce 1 + N workload to 1 + 0.n, while ensuring high fidelity?

2. Exploration

Since this painting is already completed, no need to start from scratch to copy manually, can use tools to extract necessary information from the painting, then use this information to rebuild animation on target platform:

Now engineers can use exactly what the designer intended, exactly how it was made.

Thus:

• Ensure high fidelity (animation parameters taken directly from design draft, definitely reliable)

• Reduce N workloads on multiple platforms (make basic animation code highly reusable, specific effects configurable)

Just like experienced designers before would copy out animation parameters, exporting enough necessary information from design draft can ensure fidelity (exactly how it was made)

With complete animation parameters can further configure, parse this configuration data on target platform, complete trajectory playback (rebuild animation). Each platform implements business-irrelevant animation base library, business layer only needs to input configuration data into base library, next configuration data controls animation effects, timing and their combination, this way can reduce N business layer workload to 0.n

3. Target Positioning

Lottie is such a solution, wants to reduce business workload of implementing animations on multiple platforms (easily), while ensuring animation effects are highly restored (high-quality):

Easily add high-quality animation to any native app.

Specifically:

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Suitable for multiple platforms (iOS, Android, React Native and Web), can easily and happily implement AE animation effects

Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them.

Cross-platform advantage lies in reducing repetitive work on multiple platforms, after all defining and implementing animation effects is a complex and time-consuming thing:

How difficult and time consuming it can be to re-create animations from scratch.

Actually there are similar other solutions, such as facebookincubator/Keyframes:

A library for converting Adobe AE shape based animations to a data format and playing it back on Android and iOS devices.

Keyframes' limitation lies in only supporting partial (interaction response aspect) AE features, while Lottie's goal is to support most AE features:

Our goal is to support as many After Effects features as we possibly can, to allow for a lot more than simple icon animations.

The more AE features supported, the less constraints on designers, this is also one of the reasons Lottie solution is more popular

4. Implementation Thinking

            JSON
Bodymovin ----------> Lottie Player
            Image Resources

After designer finishes animation with AE, export JSON format Lottie animation definition and related image resources through Bodymovin (AE plugin), output to Android, iOS, ReactNative, Web front-end engineers, engineers call corresponding platform's Lottie Player to load animation resources, and control animation play/pause etc.

AE plugin part is responsible for converting AE's animation definition to Lottie animation definition, and output JSON file, difficulty lies in supporting conversion of more AE features, to avoid designers feeling constrained when using

Player part is responsible for parsing Lottie animation definition, loading related resources and using platform-supported technology to implement animation effects, for example Web environment defaults to implementing through SVG animation, optional Canvas drawing and CSS animation implementation

Key lies in:

• Universal animation definition

• Player supporting this animation definition under each platform

Similar to Java's cross-platform thinking: platform-independent class files + platform-related JVM implementation

5. lottie-web

airbnb/lottie-web is Lottie Player for Web environment, simple few lines of code can implement complex animation effects, for example:

<div id="bm"> </div>

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
})

P.S. Specific effects see Simple Bodymovin Demo

Defaults to implementing through SVG (renderer: 'svg'), additionally supports canvas and html, differences lie in:

• svg: Animation elements (shapes etc.) implemented with SVG, animation effects done through SVG animation

• canvas: Elements drawn through Canvas, animation effects implemented through rAF timed refresh redraw

• html: Animation elements implemented with SVG, animation effects done through CSS animation

Actual use discovered, SVG mode has best compatibility, HTML mode has problem of mask animation corner radius becoming square when enlarged

P.S. About SVG and its animation, please check [SVG Basic Knowledge](/articles/svg 基础知识/)

P.S. More detailed API see Usage

There are two ways to introduce lottie-web, either reference CDN resources, or download latest release:

$ ls lottie-web-5.3.0/build/player/
lottie.js		lottie.min.js		lottie_light.js		lottie_light.min.js

Among them, lottie_light.js (lightweight version) only supports SVG mode, and doesn't support expressions

6. Summary

Rax's cross-container running, Lottie's cross-platform animation... front-end technical solutions are no longer limited to front-end field, but extending upstream and downstream, pulling designers, client-side brothers, server-side brothers to play together, for example:

• Ant Design: Front-end + Designer

• React Native: Front-end + Client-side Brothers

• Backends For Frontends: Front-end + Server-side Brothers

Through upstream and downstream horizontal collision, precipitating and producing solutions that can improve overall efficiency, seems to have become an inevitable trend

Reference Materials

• Introducing Lottie

• Lottie

• Viewpoint｜Ant Financial Yubo: How did we evolve from front-end technology to experience technology?