Lottie动画库

4,852 阅读2分钟

Lottie是啥

Lottie是一个用于Android,iOS,Web和Windows的库,用于解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动设备和网络上呈现它们! 设计师第一次可以创建和运送漂亮的动画,而无需工程师手工重新创建。

Airbnb开发和维护,目前star较多,目前腾讯、爱奇艺、今日头条、腾讯、咕咚、脉脉等都有使用。

动画方案对比

GIF图片

文件较大、容易有锯齿

序列帧

文件较大、动画播放时占用内存

SVG

实现和维护成本高、容易有买家秀/卖家秀区别

Canvas

实现成本高

Lottie

优势
  • 支持通过网络加载JSON文件,便于A/B,能做到不发版本,动态更新

  • 开发效率高,实现简单,更换方便,易于调试和维护

  • 一份JSON文件,支持跨平台使用。一次绘制、一次转换、随处可用;例如Canvas 实现成本就比较高

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

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

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

  • Mask 和 mattes(蒙板和遮罩)对动画性能会有较大影响

  • 列表中使用动画要注意内存问题

  • Lottie 中 ImageLayer 对图片的解码是在主线程的,并且没有对 Bitmap 重用,可以自己将图片解码的逻辑迁移到子线程,并增加对 Bitmap 的缓存来提高性能

  • 不适合给 View 本身添加动画

  • 不适合动画中有动态内容(如:需要显示一个不断变化的数量)

Lottie使用

image.png

lottie资源库

lottiefiles.com/

lottie官网

airbnb.io/lottie/#/RE…