1. 前言 

北瓜所在的设计行业是做直播产品，经常接触到动效方面的需求，常见的有Loading动画、卡牌抽取动画、徽章展示动画等等。动画有简单的、有复杂的、有时间短的、有时间长的、有特效的，导致我们的落地方案呈现多样化。

上面所述的动画我们把它归类为：直接落地输出可见动画。


加载动画·北瓜练习

有朋友就有疑问了，难道还有不能落地的动画？那还叫动画吗。这个还真的有，它叫：间接落地交互动画。

间接落地交互动画：引导用户交互、页面转场、提高用户体验等。 

这种动画的输出是不需要很多软件和插件来配合的，只需要给开发提供一份动效输出文档，文档内容需要包括：标注动效前后静态设计稿，口头描述或可以演示的MP4，并且需要给到开发具体动效参数。（例：用户点击后购物车按钮尺寸100%-50%，旋转0°-180°，X轴位50px，Y轴位移20px，动效持续400ms）

交互动画·北瓜作品

本期就分享一线大厂都在用的落地方案（直接落地输出可见动画）！

2. 几种常用的输出方案 

1，设计师又爱又恨的GIF 

2，流畅稳定有损的视频

3，一般都会用到的精灵图

4，适合多特效的APNG/WEBP

5，近几年流行的落地格式LOTTIE/SVGA

3. GIF

GIF的全称是Graphics Interchange Format，可译为图形交换格式，实现和开发成本低的有损格式，仅支持8位256色但具有很强的兼容性， 

体积大，质量差，尤其是透明的动画一定要慎用。

1.1 PS + 视频输出：通过AE导出视频格式（AVI视频）后，再通过PS导出GIF



1.2 将视频拖进PS后，导出GIF操作如下“文件 —— 导出 —— 存储Web所用格式旧版 —— 存储完成”这样输出的质量偏差、体积一般。




2.1 PS + 序列图：通过AE导出PNG序列图后，再通过PS导出GIF



2.2 序列图文件夹拖进PS方法（文件 —— 打开 —— 选择第一张图 —— 必须勾选图像顺序 —— 打开）

2.3 导出操作方法和视频用PS导出GIF方法一样，这样输出的质量一般、体积一般。

注意：PS导出GIF有时会失败，北瓜猜测原因有这几种： 

1，动画时间过长
2，图像尺寸太大
3，FPS的数量限制（FPS就是每秒有多少帧）
4，莫名其妙的失败

3.1. 通过AE插件GIFGUN直接导出（之前有讲过方法的，忘记了的小伙伴可以百度哈），方便快捷、缺点是限制在30FPS内、输出质量差、容易掉帧。



推荐一个压缩GIF的软件：PPDuck（加微获取）

4. 视频 

实现成本低，兼容性强，能够直接播放视频、音频的有损文件，体积一般。一般用在宣传、开屏、演示如抖音、快手的开屏动画。讲下MP4的输出和压缩方案

1.1 将视频拖入PS，然后通过PS导出MP4

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

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




2，压缩视频的方案有——Handbrake、格式工厂、Adobe Media Encode。使handbrake无需特别技巧便可直接将DVD电影内转换成AVI/MPEG4格式,还有MP4及OGM输出、AAC 及 Vorbis 编码。

5. 精灵图

序列帧是无损且低内存的格式，能在客户端使用，不建议在 Web 环境中使用（在网页中引发几十次的刷新），在工作中我们会经常遇到前端这样说帮我把图标合成一张“精灵图”吧，其实它的真正的名称是Sprite图，也就是说把需要的全部图标合成在一张背景图，这样就可以很好的解决问题，我们会使用到CSS Sprite Exporter这个脚本完成精灵图的输出。

先讲下CSS Sprite Exporter安装方法：访达 —— 应用程序 —— AE文件夹 —— Scripts —— ScriptUI Panels —— 将文件粘贴在这里。

文中讲的其它AE插件都是通过ZXP辅助安装（北瓜的第一篇文章有详细写到）。

AE脚本CSS Sprite Exporter，能够一键导出精灵图与开发所需的代码。导出使用方法：AE —— 窗口 ——  CSS Sprite Exporter

注意：默认为宽度为5000px，所以最终导出的大图宽度为5000px。参数设置好之后点击“生成”会导出两个文件代码和图片然后一并交给开发。

6. APNG/WEBP

APNG格式诞生于2004年，是基于png格式的动画格式图片，它的动图后缀依然是.png，因为兼容性问题没有像GIF这般普及，一张图看懂二者的优劣。



WEBP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，基本兼容所有的主流浏览器，相同的效果webp 格式要比 png 格式小出来大概一半的大小，同时他也兼容所有的安卓设备，像一些 ios 设备需要通过一定的方式才可以支持，不过相比来说各方面的表现都是非常优秀的。

导出：通过iSparta软件导出，将AE输出好的序列图拖拽到iSparta软件中点击开始即可导出APNG/GIF/WEBP（GIF通过此软件导出质量偏差）

7. LOTTIE/SVGA

抛开本质区别，二者是近几年最主流的动画落地方式，满足很多种类的矢量动画和图片动画，SVGA相对LOTTIE更加稳定但支持的AE特性也少一些。 

1，Lottie是airbnb开源的支持iOS、Android、React Native的动画库。原理是把我们的各种矢量元素以及位图图层以及他们的效果关键节点打包的形式行成一个 Json 格式的文行。导出用到的AE插件：Bodymovin

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





2，SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。动画文件体积更小，播放资源占用更优，动画还原效果更好。导出用到的AE插件：SVGAConverter

操作方法：点击AE窗口 —— 扩展 —— SVGAConverter —— 选择输出路径 —— 开始完成输出

8. 总结 

北瓜讲了这么多的落地方案，那在工作中我们应该怎样选择适合需求落地的方案呢？

小总结来了，我们从“三个维度”去分析落地方案的适用性～

1，占用内存大小对比



2，质量稳定对比



3，支持的AE特效对比

自己学会分析，寻找最合适的动效求落地方案

10. 感言 

北瓜讲的这些基本上包含了大厂及主流的动效落地方案，感谢阅读～

总而言之动效的输出方案非常多样，互联网更新迭代的速度越来越快，保不准下次会出现更好的落地方案，也没有完美的一站式解决方案，身为设计师的我们要保持良好的洞察力，这样才能应对多种多样需求下输出的动效效果的落地。

文章里提到的导出插件：CSS Sprite Exporter/ Bodymovin/ SVGAConverter 文末自己下载。大家对动效有什么不懂得，欢迎看北瓜主页交流学习（附送PPDuck、iSparta）。

点个赞，比啥都强

Powered by Froala Editor