关于Lottie动画的调研

3,348 阅读4分钟

1、为什么要使用lottie

  • 1、对设计:做的动画素材想一次设计,各个平台能直接运行,效果可由自己灵活掌控,减少于开发的调整沟通;
  • 2、对开发:针对设计越来越复杂的动画,比如上图所示,可以解决的方案有:
    • 前端实现svg、canvas动画(实现成本较高、维护成本高);
    • 设计师切gif(文件较大、容易有锯齿);
    • png 序列帧:它需要大量的图片素材支持,对apk体积带来负担;在进行动画播放时会占用很多内存,容易OOM;
    • 视频:没有交互,只能等视频播放完毕才能交互。 需要一种更好的解决方案,能够以比较低的成本,来实现这些复杂动画;
  • 3、对运营:动画实现可配置,不同时间想有不同的动画效果,而目前支持的动画都是需要跟版本的。 使用 Lottie ,这一切问题就迎刃而解了。Lottie 只需要解析导出的 JSON 文件及所需要的图片,就能在各个平台上实现相同的动画效果,它实现成本低,上线后只需要动态替换对应的 JSON 文件就能实现可配置、可运营。

2、Lottie动画的优势和不足:

优势:

  • 1.支持通过网络加载JSON文件,这对A / B测试很有用;

  • 2.开发效率高—代码实现简单,更换动画方便,易于调试和维护,可以使用动画进度功能通过手势驱动,并且可以通过更改简单值来操纵动画速度;

  • 3.数据源多样性—可从assets,sdcard,网络加载动画资源,能做到不发版本,动态更新;

  • 4.能够导出一份JSON文件,并且支持跨平台使用,android,ios,react native通用。一次绘制、一次转换、随处可用;

  • 5.能够100% 还原设计师给出的各种复杂动画效果;

  • 6.针对复杂动画在低性能设备上的卡顿等性能问题提供了工程化的解决方案。 不足:

  • 1.对设计师的要求较高,需要有一定得AE软件基础;

  • 2.一些特殊场景难以胜任,比如遮罩里面的一些效果,ios平台下的形状运算等等效果不是很好;

  • 3.相对于属性动画,在展示大动画时帧率较低。

3、lottie需要增大apk多少?

lottie v2.7.0 jar包大小159KB,基于v3.43.0_release_v2 分支的测试,引入lottie v2.7.0 加固后的release包体积增大约70KB。

4、 相同动画用lottie json和用frame animation图片需要多大,也就是是否能节省空间?

答:lottie对传统动画尤其是帧动画的替代优势还是比较明显的,在一些大厂的APK体积瘦身技术分享博客中都有所提及(Reference 9)。

5、Lottie性能问题:

  • 1、Mask 和 mattes(蒙板和遮罩)对动画性能会有较大影响,不宜在列表中使用包含 mask 或 mattes 的动画;
  • 2、列表中使用动画,要使用缓存 LottieAnimationView.setAnimation(String, CacheStrategy),避免内存抖动;
  • 3、Lottie 中 ImageLayer 对图片的解码是在主线程的,并且没有对 Bitmap 重用,可以自己将图片解码的逻辑迁移到子线程,并增加对 Bitmap 的缓存来提高性能;
  • 4、内存泄漏问题,有解,参考Reference5。

6、Lottie的使用场景

1.Lottie 不适用的两种场景:

  • 给 View 本身添加动画(如:从右下角到移动到页面中,并逐渐放大的过渡效果);
  • 动画中有动态内容(如:需要显示一个数量,多少来自数据库/网络)。

2.Lottie 非常适合像一段动画的播放这样的场景使用:

  • json 文件的大小比 gif 文件小很多;
  • 能够非常方便的控制动画播放,如:速率、范围;
  • 使用场景举例:动态启动页、动态图标/按钮、空页面、加载/下拉刷新、Banner/弹框、表情/礼物/动态贴纸等(Refernce 4)。

7、 Android IOS最低支持版本是多少

  • Android 最低支持 API 16(v2.5.0-rc1及以下minSdk为14,v2.8.0 及以上仅支持androidx);
  • IOS 支持iOS 8 及其以上系统。

8、 Lottie都有哪些公司在用且有什么问题吗?

目前我知道的有 Airbnb、爱奇艺、今日头条、腾讯、咕咚等; 网络博客中目前搜索到的问题基本都提出了相应解决方案。

Reference: