Lottie is what

Lottie is a library for Android, iOS, Web and Windows for parsing Adobe After Effects animations exported as JSON using Bodymovin and rendering them on mobile devices and the Web! For the first time, designers can create and ship beautiful animations without engineers recreating them manually.

Airbnb developed and maintained. Currently, there are many stars, which are used by Tencent, IQiyi, Toutiao, Tencent, Gudong and Mai.

Comparison of animation schemes

GIF images

Files are large and easily jagged

The sequence frame

Large files occupy memory for animation playback

SVG

High implementation and maintenance costs, easy to distinguish between buyer/seller show

Canvas

High implementation cost

Lottie

advantage

  • Support to load JSON files through the network, convenient A/B, can do not send the version, dynamic update

  • High development efficiency, simple implementation, convenient replacement, easy debugging and maintenance

  • A JSON file that supports cross-platform use. Draw once, convert once, use anywhere; Canvas, for example, has a high implementation cost

  • Can 100% restore the designer to give a variety of complex animation effects

  • It provides an engineering solution to the performance problems of complex animation on low performance equipment, such as lag

disadvantage

  • High requirements for designers, need to have a certain AE software foundation

  • Masks and mattes (masks and masks) have a big impact on animation performance

  • Be aware of memory issues when using animations in lists

  • In Lottie, the ImageLayer decodes images in the main thread and does not reuse bitmaps. It can migrate the image decoding logic to child threads and increase the cache of bitmaps to improve performance

  • It is not appropriate to animate the View itself

  • Not suitable for animations with dynamic content (e.g., need to show a constantly changing quantity)

Lottie use

Lottie repository

lottiefiles.com/

Lottie’s official website

Reality. IO/Lottie / # / RE…