原来大厂的动效是这样落地的，难怪夸我做事靠谱

做直播产品的小伙伴，经常接触到动效方面的需求，常见的有Loading动画、卡牌抽取动画、徽章展示动画等等。动画有简单的、复杂的、有时间长的、有特效的、导致我们落地方案呈现多样化。上面所述的动画我们把它归纳为：直接落地输出可见动画。今天@是北瓜呀就来分享一线大厂都在用的落地方案。

几种常用的输出方案

设计师又爱又恨的GIF
流畅稳定有损的视频
一般都会用到的精灵图
适合多特效的APNG/WEBP
近几年流行的落地格式LOTTIE/SVGA

1. 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有时会失败，北瓜猜测原因有这几种：

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

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

推荐一个压缩GIF的软件：PPDuck

2. 视频

实现成本低，兼容性强，能够直接播放视频、音频的有损文件，体积一般。一般用在宣传、开屏、演示如抖音、快手的开屏动画。讲下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 编码。

3. 精灵图

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

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

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