Lottie系列四：使用建议

一 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