Android 动画库对比(Lottie 和 SVGA)

Lottie 和 SVGA 对比

友情链接： SVGA 源码解析

现有方案

• 方案一: Gif / 帧动画
• 方案二: Native动画（属性动画/补间动画）
• 方案三：动画库
  • Lottie
  • SVGA
  • Keyframes
  • Squall

Gif

• 1.思路：一般Gif或者帧动画 的性能差是由于图过多，每秒种几十帧，每一帧都是一张图。一个小动画往往需要几十张图。如果变成资源下载，资源包体积难以控制。

• 2.Gif / 帧动画缺点：

  • 资源文件包比较大
  • 效果不是很好(只支持8位颜色)

• 3.使用场景：以上来看gif & 序列帧 只适合做小的动画，例如下拉刷新，小的动态logo,或者直播中的小礼物场景。

原生 Native 动画

• 1.思路：Native 动画实则是属性动画或者补间动画。性能相比较gif而言性能比较好，但是有大量动画的需求时，往往生产力是不够的，一开始手动码动画，一个动画最多时写了3000多行code。项目最多的动画达4000行。生产力成了瓶颈。 总结：
• 2.Native 动画优缺点：
  • 开发成本高
  • 必须发版
  • 不能完全100%还原复杂动画，调参数比较繁琐
  • 图片资源大,影响apk包大小
• 3.场景： 适合转场，固定的场景。不适合大量、快速迭代的需求。

动画库对比

• 动画库的流程

• 

• 一套引擎库，三端共用

• 一套协议，三端各自实现
• 对比

• 以上基本排除了Keyframes 和 Squall。

  Dragonbones / Spine 动画库

   

• 这两个可能市面上见的不多，由于不是开源库，所以简单介绍一下该设计工具的思路。

• 1.思路：如上图，Dragonbones /Spine设计工具的思路是将一张图进行骨骼化拆分，如果需要做动画时，对胳膊/腿等零部件图进行位置的变更即可，不需要对原图进行重新构建。实现了对图片极大的进行复用。

• 2.Dragonbones / Spine缺点：

  • 图片可以复用，性能较好
  • 不需要发版
  • 研发成本比较大。
  • 需要一整套的解放生产力的工具：
    • a.设计输出工具(插件的二次开发)
    • b.礼物播放引擎(cocos等，三端可用)

• 3.场景：需要快速迭代的需求。

  SVG 概念

• SVG 实际上指的是设计软件中的概念：SVG图片格式，一种矢量图形。

• 另一个角度来讲一张图或者一个动画，是由很多上下层级的图层构成。
  比如当前的简单的图，看到的是一张图，但在设计工具中是三个图层构成，有着不同的上下层级顺序。

SVGA 动画库源码思路

• 一帧一帧
• 通过设置帧率，来生成一个配置文件，使得每一帧都有一个配置，每一帧都是关键帧，通过帧率去刷每一帧的画面，这个思路跟gif很像，但是通过配置使得动画过程中图片都可以得到复用。性能就提升上来了。并且不用解析高阶插值（二次线性方程，贝塞尔曲线方程）

Lottie 动画库源码思路

• 一层一层
• 完全按照设计工具的设计思路来进行还原，将动画脚本导出并解析。动画脚本非常的轻量。
• 将所有的动画拆成多个层级,每个层级layer都有一个动画配置，播放时解析多个layer的配置，并给每个layer做相应的动画。也达到了图片可以复用。当需要解析高阶插值（二次线性方程，贝塞尔曲线方程）时，性能相对而言差一点。

SVGA

设计成本

• SVGA目不支持种类：
  • 不支持复杂的矢量形状图层
  • AE自带的渐变、生成、描边、擦除…
  • 对设计工具原生动画不友好，对图片动画友好(适合礼物场景)
• 导出工具开源

  开发成本

• 1.优点
  • 资源包小
  • 测试工具齐全
  • 三端可用
  • 回调完整
  • Protobuf 序列化结构数据格式，序列化的数据体更小，传递效率比xml,json 更高。

• 2.缺点

  • 每个礼物播放时都去新解压，需要改一套缓存策略
  • svga 用zlib打包(字节流数据压缩程序库)，不方便解压和追踪包内容。

• 4.插入动画头像功能

  • 支持，需定义一套专属的头像配置的协议。

    Lottie

    设计成本

• 1.Lottie 不支持的设计：
  • 基本满足所有种类的矢量动画和图片动画。
  • 有导出插件

    开发成本

• 1.优点
  • 三端可用
  • 回调完整
  • 项目已经存在一套缓存逻辑
  • 当前的库可以满足业务需求，不需要二次开发

• 2.缺点

  • 资源包相较SVGA而言会大一倍多
  • 图片需要重命名 & 偶先播不出来动效。

• 4.插入动画头像功能

  • 已经支持

性能对比

• 同一礼物对比