动效导出研究

在我们参与的项目中，并不是所有的样式都由程序来实现，有时候一个很小的动效让前端日以继夜的堆砌代码是一种性价比低的方法，很多情况下需要我们设计师来完成，然而，我们平时在做动画时往往会面临导出文件非常大的问题，如何解决这个问题呢？

我们可以通过GIF图，WebM视频来完成。

GIF

GIF的压缩技术，我们可以通过删除整个视频中的部分重复及相近的帧，然后把替代帧时间补全，保证周期不变，这样可以有效的压缩GIF的体量，注意点是，该压缩方法只适用于无渐变的动效，所以GIF的应用范围比较小，同时难以控制播放，所以一般用在一些像加载这样的不需要太多操作的地方。

以我做过的一个项目为例，将一个336M的视频压缩成1M的GIF图：

第一步：将用AE制作好的视频导入到PS中，File－Import－Video Frames to Layers…选择需要的文件

选择文件

第二步：选择Limit To Every 2 Frames

第三步：将删掉的时间补全

补全时间帧

第四步：将视频导出，即Save for Web,并设置为如下内容

导出设置

WebM视频

WebM是一个视频格式，并且是一个可以控制播放的容器，它的体量是GIF的1/3，兼容响应式设计，同时全面兼容浏览器。