一 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
参考:
•Flutter进阶教程——在Flutter中使用Lottie动画
•从设计师和开发的角度使用 [lottie