动效落地方案汇总

前言 

近几年来，动效设计作为大火的设计趋势之一，越来越受到设计师们的青睐。当我们面临动效输出的时候，却会发现，虽然输出的选择在日渐变多，但是输出的结果还是很难达到理想的状态。

目前针对动效的输出与落地主要还是围绕着基础的几种输出方式，经过对比很多大厂的文章，做了简单的总结与对比。

几种常用的动效输出方式：

1. GIF：动态位图

2. PNG序列：以单帧图像呈现，输出后会生成一个序列组的文件夹；

3. 精灵图/雪碧图

4. 视频

5. JSON（Lottie动画）：通过bodymovin输出的json文档，通过代码描述路径、节点的方式来完成动画效果，与开发实际通过代码实现动画类似，减少开发实现的时间，提高了开发实现的效率。

6. SVG动画：与Lottie的方式比较类似，可以减少开发的动画工作量，可以通过keyshape设计并导出，后缀为“.SVG”。

7. APNG/WEBP

一、GIF

GIF是一个有损的文件格式，不论是色彩还是画面质感都会有一定程度的压缩。它仅支持8位256色，体积大，质量差，但实现和开发成本低，具有很强的兼容性。

优点：制作简单，直接输出可见动画，无需转换；兼容性强。

缺点：单帧色彩最高仅256色，视觉效果欠佳；对透明通道的支持性非常低，容易出现颜色失真、非矩形边锯齿或白边严重；文件过大。

输出方式：

1. AE导出视频或序列帧，再用PS导出GIF图，推荐导出序列帧再用ps导出GIF图，这样动图相对质量更高内存也更小一些。（但是PhotoShop自身限制，无法输出 500fps 以上的动画）

2. AE插件GIF Brewery3，内存占用一般，输出质量低。一般针对前两种方式无法输出时选择， 优点是比较稳定，基本不会出现任何问题。

3. AE插件gifGun，一键导出GIF图，内存相对较小，但输入质量欠佳（GIFGUN 有一个限制是只能输出低的 30fps 的动画，很多时候输出的结果会存在掉帧的情况）

在能接受动图大小的前提下，可以尽可能的调大帧速率，这样导出的动画更细腻柔和。

二、PNG序列 / 精灵图 / 雪碧图

PNG序列帧是一个无损且低内存的格式，是把活动视频用一帧一帧的图像文件来表示。

优势：输出简单，多数软件会自动补帧，动画流畅、保真度高；支持各类动效输出；开发可调控速度。

缺点：启动时需加载所有图片，文件过大，内存占用高，容易卡顿。

所以，为了避免高频次的请求下，动画无法正常播放，一般会把序列帧文件合并精灵图/雪碧图（Sprite图）

输出方式：

 1.  在AE中制作好动画

 2. 通过AE预渲染，然后选择PNG序列，直接渲染出序列帧到本地文件夹（RGB+Alpha）

 3. 导出序列帧后需要进行压缩，常用的是tinypng，压缩后较小的文件再进行交付

精灵图可以用 PS、Sketch 等图像处理工具手工拼接，也可以使用AE脚本CSS Sprite Exporter，能够一键导出精灵图与开发所需的代码。

导出方法：AE —— 窗口 ——  CSS Sprite Exporter（注意：默认为宽度为5000px，所以最终导出的大图宽度为5000px。参数设置好之后点击“生成”会导出代码和图片两个文件）

三、视频

视频格式是能够直接播放动画、音频的有损文件，体积一般，兼容性强，但是对透明通道的支持很差。

输出方式：

1. AE导出视频：AE —— 合成 ——添加到渲染队列 —— 选择Quicktime —— 选择输出路径 ——确定

2. 将视频拖入PS后导出MP4：PS —— 文件 ——导出 —— 渲染视频 —— 命好名字 —— 选择文件夹（输出到哪）—— 品质高中低（品质越高内存越大）—— 渲染

压缩视频的方案有：Handbrake（推荐）、格式工厂、AME。

四、JSON（Lottie动画）

Lottie是airbnb开源的支持iOS、Android、React Native的动画库，可以满足很多种类的矢量动画和图片动画，原理是把各种矢量元素和位图图层以及效果关键节点，以打包的形式行成一个 Json 格式的文本。它对缓动曲线的解析差，会占用非常多的内存，但是各平台效果的支持都不是很稳定，很多时候都容易出 Bug。

优势：Lottie官网提供开源库；支持多参数（手势、事件等）设置；文件小，性能优越。

缺点：仅适合AE输出，且部分功能属性不能实现；目前多用于iOS与安卓平台，且对系统版本有一定要求。

输出方式：

AE —— 窗口 —— 扩展 —— Bodymovin —— 勾选绿圆圈、点击右侧三个绿色的点选择输出路径 —— 点击Render完成输出

Lottie下载地址： https://github.com/airbnb/lottie-web

（安装成功后，需要打开AE，点击 After Effects CC > 首选项 > 常规 ，找到并勾选 “允许脚本写入文件和访问网络”，然后再使用。）

五、SVG动画

SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。动画文件体积更小，播放资源占用更优，动画还原效果更好。但是他的内存占用会比 Lottie 稍高，并且支持的特性也会比 Lottie 少一些。

SVGA可以识别矢量图、以及位图，在导出透明背景时，并不会失真。SVGA无法识别预合成

输出方式：

点击AE窗口 —— 扩展 —— SVGAConverter —— 选择输出路径 —— 开始完成输出

如何输出透底的SVG动图？

方法一：将无需输出的图层隐藏，预览窗口下方的透明背景按钮点亮，直接通过插件导出SVGA即可。

方法二：选择 [ RGB+Alpha ] 通道导出透底的PNG序列，然后将其导入至AE，使其以位图的方式存在与合成中，再使用插件导出SVGA即可。

SVGA 与 Lottie 最本质的区别在于代码对动画过程记录的方式， Lottie基本上是按照我们在 ae 当中的关键帧及缓动的结合形式去记录动画；而 SVGA 则是通过记录我们每一个图层每一个时间上的动画状态，从而省去对缓动值的计算。跟序列帧的逻辑非常相似，但是因为他的素材可以复用，所以会比序列帧占用更低的内存。

总结：SVGA相对Lottie更加稳定但支持的AE特性也少一些。

Lottie预览（区分安卓/iOS/Web）：https://airbnb.io/lottie/#/
SVGA 提供的预览地址：http://svga.io/svga-preview.html

输出的SVGA文件，部分特效未实现：将动效通过位图转换一次即可。即：输出PNG序列，然后将文件中的每一帧以PNG格式导入至AE中，在导入时千万不要勾选 [ 建立合成 ]  [ PNG序列 ] 两个选项；将所有的PNG文件有序排列后，直接拖入下方合成中，设置好静止时间为一帧一秒即可。

svga官网下载：http://svga.io/designer.html

六、APNG/WEBP

APNG格式是基于png格式的动画格式图片，它的动图后缀依然是.png。支持24位6000万种颜色,支持8位alpha透明通道,成像清晰,并且占用更低的内存。

WEBP最初在2010年发布，目标是减少文件大小，基本兼容所有的主流浏览器，有损与无损压缩转换后的WEBP体积大幅减少，同时也兼容所有的安卓设备,但一些ios设备需要通过一定的方式可以支持,各方面的表现都是非常优秀的。

输出方式：

 iSparta ，将AE输出的序列图拖到iSparta软件中，点击开始，即可导出APNG/GIF/WEBP（GIF通过此软件导出质量不太理想）。可以直接拖到浏览器当中实际预览。

iSparta官网链接：http://isparta.github.io/