A UI suggestion

compatibility

The filter effect is not fully supported on the client; the trial of the color filter has additional performance loss on the operation of the client.
If the layer has the "auto-orientation" feature, it is not supported on Web and Android.
It is not recommended to use the "mask layer". The mask layer will greatly reduce the performance of the client, so it is recommended to avoid it. If it can be replaced by a mask effect, it is recommended to use a mask instead.
The use of masks consumes a lot of performance on the client side. If there are masks that are "non-essential", be sure to delete them.
Layers that use the "time remapping" feature are not supported on iOS.
Vector shapes have a performance penalty at runtime on the client side. Especially when the number of shape layers is relatively large. If a shape has no deformation requirements, you can consider converting it to a png image instead to improve running performance.
It is recommended to use the "shape" layer instead of "solid color"; the solid color module comes with a meaningless "mask", which will cause unnecessary performance loss to the client, and cause the client to freeze when the amount is large;
For other compatibility issues, please refer to: https://www.yuque.com/lottie/lint

performance

Animation is simplified. When creating animations, always remember to keep the json file compact, such as trying not to use path keyframe animations that take up the most space. Techniques like auto-tracing, flutter can make json files very large and performance-intensive.
If there are looping frames, please do not loop in the animation file, please count the number of frames, and let the developer control the looping of this animation by itself, which can save the volume of the same layer and animation.
Create shape layers. Convert resources such as AI, EPS, SVG and PDF into shape layers, otherwise they cannot be used normally in lottie. After conversion, delete the resources to prevent them from being exported to json files.
Set the size. In AE, you can set the composite size to any size, but you need to ensure that the composite size and resource size are consistent when exporting.
In the case of satisfying the effect as much as possible, please cut the path appropriately, which has a great impact on performance.
When lottie is animating, it will be layered according to the design of AE, so try to reduce the number of layers.
If there is really no need to use path animation, please replace the vector graphics with png images, and use the transform property to complete the animation.
According to the actual situation, you can consider reducing the animation frame rate or reducing the number of key frames, which will reduce the number of draws per second.
To shorten the duration of the animation, do not do it twice on the timeline for actions that can be looped. Reading keyframes every time will consume performance. In the arrangement, try to avoid the end of action a and the start of action b, so that the actions can overlap and reduce the length of the animation.
Similar items are merged, some elements are similar, or the same is used in different places, then pre-synthesize this element and reuse this element, and you can achieve the desired animation effect by adjusting the animation properties of the pre-synthesis.
Keep the number of layers to a minimum. Each layer will be exported as corresponding json data, and the reduction of layers can greatly reduce the size of json.
As far as possible, all the layers are drawn in AE, rather than imported from other software. If it is introduced by other software, it is likely to cause the json part describing this graph to become very large.
When making, please spread the animation elements over the entire canvas, so as to avoid waste and facilitate the size adjustment of the front end.
If the vector graphics were exported in AI, please delete redundant "groups" and other elements that do not have any practical effect.
Remove those closed and useless attributes.
Only export 1x plots.
In order to prevent the compatibility problem of lottie export, please use the English version AE as much as possible, the layers should be concise and the names should be clear
Avoid large area vector parts, and large area particle effects
Avoid high performance lossy styles like 3D

AE version

Install Adobe Effect, preferably in English;

Using bitmap material: Due to the cost of using the English version of AE and some bugs in Lottie itself, when we use Lottie to export, the effect in AE is often inconsistent with the final export effect, such as gradient loss, mask loss and other issues. Therefore, it is recommended that you try to use bitmap material when making animation effects, so that most of the problems can be basically avoided. You may think that using a bitmap will lead to the final json being too large, and Lottie will lose its meaning and advantages when it lands. The table below shows the Lottie animation solution recently launched by Ctrip. You can see from the comparison table that even if the bitmap solution is used, Lottie still has a huge advantage when comparing the existing solutions horizontally.

Two development

• It is recommended to use lottie_rawRes instead of lottie_fileName, the former can use static references to animations through R instead of just string names;

• Compatibility problems caused by old versions, common: Missing value for KeyFrame error, bugly reported an error before going to the market: https://bugly.qq.com/v2/crash-reporting/crashes/67bb1120a0/16373887?pid=1

• Abandoned api: lottie_scale (from 5.0.1) https://github.com/airbnb/lottie-android/releases/tag/v5.0.1 , recommended to use imageView.setScaleType

• When Lottie animations with images folder, it is recommended to use zip file: Use a zip file if you have images. Simply zip them together and lottie will unzip and link the images automatically.

•Hardware acceleration: Hardware acceleration is generally not recommended, and Lottie is disabled by default because it does not support anti-aliasing, capitalization of strokes (pre API 18), etc. Also, depending on the animation, they might actually be less performant. detailed

A problem with three go to market bugly

https://bugly.qq.com/v2/crash-reporting/crashes/67bb1120a0/16373887?pid=1

Reason: The lottie version does not match the AE plugin

old version

implementation 'com.airbnb.android:lottie:2.8.0'

It is necessary to export the json file to the old format in AE, otherwise a Missing value for KeyFrame error will be reported;

四 Use InFlutter

The open source Lottie library already exists in Flutter , so we only need to import the relevant dependencies in the dependencies in pubspec.yaml:

dependencies:
   lottie: ^1.3.0

Import the header file to display the Lottie animation Widget:

import 'package:lottie/lottie.dart';

Read local json file:

Lottie.asset("json/fly.json")

Read network json file:

Lottie.network("https://cdn.jsdelivr.net/images/lottie_test.json",
onLoaded: (LottieComposition composition) {
    
    
     print("onLoaded");
   },
),