sound code

Android 动画库对比(Lottie 和 SVGA)

Posted by Jfson on 2018-01-08

Lottie 和 SVGA 对比

友情链接： SVGA 源码解析

现有方案

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

Gif

image

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

  • 2.Gif / 帧动画缺点：

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

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

原生 Native 动画

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

动画库对比

  • 动画库的流程
    image

  • 一套引擎库，三端共用

  • 一套协议，三端各自实现
  • 对比
动画库 Lottie SVGA Keyframes Squall Spine
支持平台 Android/iOS/Web Android/iOS/Web Android/iOS iOS Android/iOS/Web
设计工具支持 After Effects AE & Flash AE AE AE
功能边界 所有 部分 矢量图 矢量图 大部分
导出工具 插件 插件 脚本 插件 单独的设计工具
设计成本 需要命名规范 无 需要脚本 插件 单独的设计工具
资源包大小zip 2.6M 767k 2M
收费 N N N Y Y
官网 地址 地址 地址 地址

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

    Dragonbones / Spine 动画库

    image

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

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

  • 2.Dragonbones / Spine缺点：

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

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

    SVG 概念

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

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

image

SVGA 动画库源码思路

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

Lottie 动画库源码思路

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

SVGA

设计成本
  • SVGA目不支持种类：
    • 不支持复杂的矢量形状图层
    • AE自带的渐变、生成、描边、擦除…
    • 对设计工具原生动画不友好，对图片动画友好(适合礼物场景)
  • 导出工具开源
    开发成本
  • 1.优点
    • 资源包小
    • 测试工具齐全
    • 三端可用
    • 回调完整
    • Protobuf 序列化结构数据格式，序列化的数据体更小，传递效率比xml,json 更高。

  • 2.缺点

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

  • 4.插入动画头像功能

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

      Lottie

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

      开发成本

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

  • 2.缺点

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

  • 4.插入动画头像功能

    • 已经支持

性能对比

  • 同一礼物对比
项目 SVGA Lottie
内存占用 350 339
graphics 116-117 113 -103
cpu 占用 平均5.6,最高15 平均5.18,最高13.75
项目 SVGA Lottie
内存占用 390 362
graphics 144-138 114-114
cpu 占用 平均6.8,最高17 平均7.4,最高23

​

​

FEATURED TAGS
sound code
pv UV: