Lottie animation tool v6.5.2

Lottie Animation Tool is a mobile library for Android and iOS that uses Bodymovin to parse Adobe After Effects animations exported in json format and render them natively on mobile devices!

Lottie makes it easier for engineers to create richer animation effects without rewriting the code. With Lottie you no longer need to use Gif animation to show the effect.

Currently, Lottie supports path trimming, masking, covering and other operations. There is also an optional caching mechanism for faster loading of frequently used items. The goal of this app is to help developers and animators create animations for their apps more easily, thereby improving the overall interactivity factor.

Advantages of lottie

Lottie's solution is for the designer to create the animation, export it to json, and play it on the front end. Therefore, the advantage of using the Lottie scheme is that

1. The animation is realized by the designer using the professional animation production tool Adobe After Effects, which makes the animation implementation more convenient and the animation effect is better;

2. The front-end can easily call animations and control animations, reducing the workload of front-end animations;

3. Design and produce animations, display animations on the front end, professionals do professional things, and the division of labor is reasonable;

4. The seller’s show is the buyer’s show, and the restoration level is 100%;

5. Using the lottie solution, the json file size will be much smaller than the gif file, and the performance will be better.

Not enough lottie

Using the Lottie scheme has the following disadvantages

1. The lottie-web file itself is still relatively large. The size of lottie.js is 513k, and it is 144k after compression. After gzip, the size is 39k. Therefore, you need to pay attention to the loading of lottie-web. Currently, H5 projects have offline packages, and PC projects will also be uploaded to PWA, which will be cached to ensure loading speed.

2. Lottie animation can actually be understood as svg animation/canvas animation, and cannot add animation effects to existing html;

3. The export of animation json files currently exports the parameters in AE into json content one by one. If the designer creates a lot of layers, there may still be a problem of relatively large json files (20kb). Designers are required to follow certain norms.

4. There are a very small number of AE animation effects that Lottie cannot implement. Some are due to performance issues, and some are not done. For example: stroke animation, etc.