Lottie系列四：使用建议
文章目录
- 一 UI建议
-
- 兼容性
- 性能方面
- AE版本
- 二 开发
- 三 赶集bugly的一个问题
- 四 Use InFlutter
- 注意
- 源码
- 参考：
-
一 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");
},
),
注意
1、废弃api：lottie_scale（from 5.0.1） https://github.com/airbnb/lottie-android/releases/tag/v5.0.1，推荐使用imageView.setScaleType
源码
例子源码 ： https://github.com/LucasXu01/lottiedemo
参考：
•Lottie官网
•Lottie进阶和原理分析
•支持点击交互的Lottie-Android篇
•Lottie—json文件解析
•Lottie动画使用及原理分析
•如何在Lottie动画中获得可用的总帧数
•Flutter进阶教程——在Flutter中使用Lottie动画
•从设计师和开发的角度使用 [lottie