Introduction:

The emergence of Lottie has brought great convenience to designers and developers. Animations designed by designers can be 100 percent restored. However, there may be a lot of display exceptions or performance problems during the use of Lottie, so based on the official documentation of Lottie and the problems I encountered in practice, the following summary is made 🙂

1. Keep it simple

Animation must be kept simple, otherwise it will affect performance, running on the phone will appear to lag.

1.1 The vector layer exported uses 1X 1X diagram

  • When exporting materials such as Sketch to AE, use 1X diagram (to ensure the minimum resources) and change the resource size in AE
  • This part is very important. Use assets of a double image to adjust the final size in AFTER Effects. Don’t use big assets.

1.2 Use parenting when possible

  • Reason: Copying keyframes to similar layers adds extra code
  • How to do it: Use the empty layer Null Layers as the control layer to control multiple layers with the same animation. The specific methods: www.rocketstock.com/blog/how-to…

1.3 Keep layers as simple as possible and precompose as little nesting as possible

  • Animations with complex nesting relationships (such as nesting several compositions within a precomposition) can have a negative impact on performance. When it finally runs, the animation shows stuck in the phone.

1.4 Use Path Keyframe animations as little as possible

  • Because it adds data to each vertex of each keyframe, it takes up the most space
  • Similar Antotrace; Wiggler can make your JSON files very large, which can affect performance and cause stuttering

1.5 Try not to use alpha mask animation

  • Performance is greatly affected, resulting in the actual display of abnormal lag. So all animations that involve having to be implemented using masks are not implemented in Lottie.
  • If you must use alpha masks, keep the mask area to a minimum. If the mask area is too large, the animation will stall.
  • Example: I used a mask animation in a scan animation, after running in the phone, the mask animation part (the worm changes the display range as the pointer slides) is very obvious (the animation is shown below, although it does not lag in the preview below, it will be very slow in the phone)

2. Precautions

  • Duplicate names may cause Lottie to misrecognize compositions of the same name during processing. Using Chinese names may also cause the animation to display incorrectly
  • All layers are vector layers
  • All compositions should start with comp_ and use English as much as possible
  • All layer names should be in English
  • All composition names, layer names do not have the same name
  • If an empty layer Null Layer is used to control multiple animations, make the Null layer visible and transparent to 0%

3. The export

  • Output full screen animation. Output size is subject to the widest screen. The final cut was centered with centerCrop on android devices

4. Unsupported content

4.1 Does not support any item in the After Effects menu

4.2 Expressions are not supported (official cute, just pretend they don’t exist XD)

4.3 Not supporting Blend Mode

4.4 Layer Styles Not Supported

  • Add shadows, color overlays, strokes, etc

4.5 Unstable expression of gradient animation

Many times when gradient animations are involved, the display will be abnormal. If that happens

  • 4.5.1 Check whether the precomposition has the same name
  • 4.5.2 Check whether the pre-synthesized naming format is comp_xxxxx (Do not appear Chinese)
  • 4.5.3 Sometimes in BodyMovin the gradient animation will be shown in black and white, this may be the preview problem of bodyMovin itself, subject to the preview of the demo.
  • 4.5.4 Common unsupported contents have been listed. For other parts, please refer to the table * Airbnb. IO/Lottie/Supp…

5. About plug-ins

5.1 Phasing out Sketch to AE

  • This often causes vector layers to turn into images, and gradient layers to turn into images, which makes exporting unstable

5.2 Use the AEUX plugin

  • So far so stable

5.3 preview

  • Use Lottie App to preview the animation

References: * Lottie official documentation [Airbnb.io/Lottie /#/af…]

6. Related articles

Lottie Zero Basics Introduction

Exception-free summary is equivalent to the advanced chapter, so it summarizes a zero-based introductory version, this is equivalent to the basic Lottie series, the combination of the two will have a more systematic understanding of Lottie.

Juejin. Cn/post / 684490…