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

你可能感兴趣的:(动画,android)