一 UI建议

兼容性

滤镜效果在客户端上不全支持；颜色滤镜的试用对客户端的运行上存在额外的性能损耗。
图层如果存在 “自动定向” 特性，在 Web 和 Android 上不支持。
不推荐使用“遮罩层”，遮罩层对客户端运行性能的损耗极大，建议避免使用。如果可以用蒙版效果替代，建议用蒙版替代使用。
蒙版的使用对客户端运行性能消耗比较大，如果存在蒙版为“非必需”的，务必删除。
图层如果使用 “时间重映射” 特性，在 iOS 上不支持。
矢量的形状在客户端运行时存在性能的损耗。尤其是在形状图层数量比较大的情况下。如果一个形状无形变要求，可以考虑转化成png图片替代，以提高运行性能。
建议用“形状”图层替代“纯色”；纯色模块自带一个无意义的“蒙版”，对客户端运行有不必要的性能损耗，量大时引起客户端卡顿；
其他兼容性上的问题可查阅：https://www.yuque.com/lottie/lint

性能方面

动画简单化。创建动画时需时刻记着保持 json 文件的精简，比如尽量不使用占用空间最多的路径关键帧动画。诸如自动跟踪描绘、颤动之类的技术会使得 json 文件变得非常大且耗性能。
如果有循环的帧，请不要在动画文件里面循环，请数出帧数，让开发自行控制这段动画的循环，能节省相同图层和动画的体积。
建立形状图层。将 AI、EPS、SVG 和 PDF 等资源转换成形状图层否则无法在 lottie 中正常使用，转换好后注意删除该资源以防被导出到 json 文件。
设置尺寸。在 AE 中可设置合成尺寸为任意大小，但需确保导出时合成尺寸和资源尺寸大小保持一致。
在尽量满足效果的情况下，请对路径做适当的裁剪，这个对性能影响很大。
lottie 进行动画的时候会按照 AE 的设计进行分层，所以要尽量减少层数。
若确实没有必要使用路径动画，请将矢量图形替换为 png 图片，并用 transfrom 属性完成动画。
可以根据实际状况，斟酌降低动画帧率或者减少关键帧数量，这会减少每秒绘制的次数。
精简动画时长，可以循环的动作，就不要在时间轴做两遍，每一次读取关键帧都会消耗性能。编排上尽量避免 a 动作结束，b 动作开始，可以让动作有所重叠，减少动画长度。
同类项合并，有些元素是相似的，或者相同的用在了不同的地方，那就把这个元素预合成重复使用这一个元件，可以通过对该预合成的动画属性的调整达到想要的动画效果。
尽量减少图层个数。每个图层都会导出成相应的 json 数据，图层减少能从很大程度上减小 json 大小。
尽可能所有的图层都是在 AE 里面画出来的，而不是从其他软件引入的。如果是其他软件引入的，很可能导致描述这个图形的 json 部分变得很大。
制作的时候，请将动画元素铺满整个画布，这样可以避免浪费，也方便前端进行尺寸的调整。
如果矢量图形是在 AI 中导出的，请将多余的“组”等没有任何实际效用的元素删掉。
删除那些关闭了和无用的属性。
只导出 1x 图。
为了防止 lottie 导出的兼容性问题，请尽量使用英文版本 AE ，图层需简洁，命名清晰
避免大面积矢量部分，以及大面积粒子效果
避免使用 3D 等高性能损耗样式

AE版本

安装Adobe Effect，最好是安装英文版本；

使用位图素材：由于英文版AE的使用成本问题，和Lottie本身的一些BUG，很多时候在我们使用Lottie导出时，AE内的效果和最终导出效果不一致，比如渐变丢失，蒙版丢失等问题，所以建议大家在制作动效时，尽量使用位图素材，这样基本能避免在绝大多数的问题。可能大家会觉得使用位图会导致最终的json过大，Lottie落地失去意义与优势，下方表格是携程火车票最近上线的Lottie动效方案，大家可以从表格对比看出，就算使用位图方案，横向对比现有的解决方案，Lottie依然是优势巨大，原因便是其他方案1s有25帧图片，而Lottie整个动效的文件素材不过10几张，动效时间越长，lottie优势越明显。

二开发

•推荐使用lottie_rawRes代替lottie_fileName，前者可以通过 R 使用对动画的静态引用，而不仅仅使用字符串名称；

•旧版本导致的兼容问题，常见的：Missing value for KeyFrame错误，赶集之前bugly有报错：https://bugly.qq.com/v2/crash-reporting/crashes/67bb1120a0/16373887?pid=1

•废弃api：lottie_scale（from 5.0.1） https://github.com/airbnb/lottie-android/releases/tag/v5.0.1 ，推荐使用 imageView.setScaleType

•当含有images文件夹的Lotttie动画，推荐使用zip file：Use a zip file if you have images. Simply zip them together and lottie will unzip and link the images automatically.

•硬件加速：一般不推荐使用硬件加速，默认Lottie是禁用的，因为它不支持反锯齿、笔画大写(pre API 18)等。此外，根据动画的不同，它们实际上可能性能较差。详细

三赶集bugly的一个问题

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

原因：lottie版本和AE插件不匹配

旧版本

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

需要在AE中把json文件导出为旧格式，否则报Missing value for KeyFrame错误；

四 Use InFlutter

在Flutter中已经存在开源的Lottie 库，所以我们只需要在pubspec.yaml中的dependencies导入相关的依赖即可：

dependencies:
   lottie: ^1.3.0

在需要展示Lottie动画Widget导入头文件：

import 'package:lottie/lottie.dart';

读取本地json文件：

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

读取网络json文件：

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