最近需求涉及到较为复杂的动画实现，虽然后来完成与今天所要讲的毫无关系（实现方式会在下篇讲）。但是也是由此萌生了我对市面上较为流行动画的实现方式产生了兴趣，到底是谁好用呢？是谁更优秀呢？

GIF和WebP

GIF：图像互换格式（GIF，Graphics Interchange Format）是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档，采用LZW压缩算法进行编码，有效地减少了图像文件在网络上传输的时间。它是当前万维网广泛应用的网络传输图像格式之一。（来自维基百科）

优点：

• 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
• 可插入多帧，从而实现动画效果（类似原生帧动画）。
• 可设置透明色以产生对象浮现于背景之上的效果。

缺点：

• GIF的规范最新版本是在1989年制定的，一个24位色都没有普及的时代，因此，GIF规范只支持256色索引颜色，并且只能通过抖动、差值等方式模拟较多丰富的颜色。更为悲剧的是，它的alpha通道只有1bit，换言之，一个像素要么完全透明，要么完全不透明，而不像现在PNG的RGBA的8bit alpha通道，alpha值也可以和RGB一样都有255个透明值。这导致了所有GIF的图片带上透明度以后，边缘会出现明显的锯齿。所以如果你的客户端需要展示带透明度的动图，GIF基本上可以不考虑。
• 项目中用gif图片来实现的话，在图片大小和动画帧数之间很难权衡。而且会导致内存吃紧。
• 一般Gif或者帧动画 的性能差是由于图过多，每秒种几十帧，每一帧都是一张图。一个小动画往往需要几十张图。如果变成资源下载，资源包体积难以控制。

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

WebP：WebP是一种现代图像格式，可为Web上的图像提供出色的无损和有损压缩。使用WebP，网站管理员和Web开发人员可以创建更小，更丰富的图像，从而使Web更快。

优点：

与PNG相比，WebP无损图像的尺寸要小26％。在同等的SSIM质量指标下，WebP有损图像比同类JPEG图像 小25-34％。

无损WebP 支持透明性（也称为Alpha通道），而其额外字节仅为22％。对于可以接受有损RGB压缩的情况，有损WebP还支持透明性，与PNG相比，文件大小通常小3倍。

WebP是Google在2010年发布的图片格式，完全开源，使用了VP8（就是WebM视频所用到的解码器）作为帧压缩编码器，而且在Chrome，Android上得到了原生的支持，具体规范参见:WebP

同样的支持RGBA，而且静态WebP的压缩率比起同质量PNG平均要高上20%左右。现在各大App厂商已经有开始迁移WebP。除了静态的WebP，还有动态WebP格式(Animated WebP)支持。

缺点：

• 4.2.1+ 对于webp的decode、encode是完全支持的（包含半透明的webp图）
• 对于4.0+ 到 4.2.1 ，只支持完全不透明的decode、encode的webp图
• 4.0 以下，应该是默认不支持webp了，需要引入so来做低版本兼容

webp转换工具：https://developers.google.com/speed/webp/docs/cwebp

Lottie和SVGA

Lottie：Lottie是一个适用于Android，iOS，Web和Windows的库，它可以使用Bodymovin解析以json 格式导出的Adobe After Effects动画，并在移动设备和Web 上原生呈现它们！

优点：

• 开发成本低，设计师导出json后，开发同学只需引用文件即可。
• 支持服务端URL创建，服务端可以配置json文件，随时替换动画。
• 性能提升，替换原使用帧图完成的动画，节省客户端空间和内存。
• 跨平台，iOS、Android使用一套方案，效果统一。
• 支持转场动画

缺点：

• 对某些AE属性不支持。
• 对平台有限制，iOS 8.0 以上，Android API 14 以上。
• 交互动画不可行，主要是播放类型动画。

SVGA：SVGAConverter 可以将 Flash 以及 After Effects 动画导出成 .SVGA 文件（实际上是 ZIP 包），供 SVGAPlayer 在各平台播放，SVGAPlayer 支持在 iOS / Android / Web / ReactNative / LayaBox 等平台、游戏引擎播放。

SVGA 做的事情，实际上，非常简单，Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素（位图、矢量），并将其在时间轴中的每帧表现（位移、缩放、旋转、透明度）导出。 Player 会负责将这些信息还原至画布上。

因此，你会发现，SVGA 既有序列帧的特点，又有元素动画的特点。Player 逻辑极度简单，她只负责粗暴地将每一个元素，丝毫不差地渲染到屏幕上，而无须任何插值计算。（我们认为，任何插件计算的逻辑都是复杂的）

也因此，你会发现，SVGA 不同于 Lottie，Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现，而 SVGA 则将这些逻辑免去。也因此，SVGA 可以同时支持 Flash，我们相信 Flash 以及其继承者 Animate CC 仍然有强大的生命力，以及完善的设计生态。

SVGA 最初的目标是为降低序列帧动画开销而生的，因此，性能问题一直是 SVGA 关注的焦点。如果你可以深入地探究 SVGA 的实现方式，你会发现，SVGA 实质上做了一件非常重要的事情。她会在动画播放前，一次性地上传所有纹理到 GPU，接着，在播放的过程中，这些纹理会被重复使用。CPU 与 GPU 交换的次数大大减少，同时，纹理的数目也在可控范围。内存、CPU、GPU 占用能达到最优状态。

目前市面上很多较为复杂的动画需求都有设计师使用Lottie或者SVGA去实现，在设计师能力不足的情况下就会退而求其次使用WebP。最后才会选择由原生动画去实现，这里由于开发成本高还原度有差，图片资源等问题原生开发目前也算是一种保底方案。

个人感觉Lottie比较推荐，主要是因为它的API较为丰富，相对WebP可控性较高，并且占用资源相对少。目前还未使用过SVGA，但是它有一个非常诱人的优点就是可动态向动画中添加元素或者更换元素，在一些需要动态添加更换头像之类的动画就非常占有优势了。