前言

当下UI设计师工作中多多少少都会涉及到动效的制作，如交互动效，icon动效，运营类的微动效等，从设计制动效到交付开发的过程中，总有一个不起眼的环节会占用我大量时间，这个环节就是将完成的动效导出gif，在自己查阅了大量资料，咨询了很多人以及自己实践了n多次后，得到了很多种解决办法，在此，提炼了一些常用到，效果较好的方法分享出来。本篇文章只分享GIF图的导出方法，不包含动效转Lottie。

方式一：视频导入PS再导出GIF图

  1. 在AE中选择合成-添加到渲染队列渲染视频，选择“QuickTime”格式（渲染速度快），得到一个.mov的视频文件；

    导出视频

  2. 接着我们将该视频导入到ps中，将视频转换成帧动画，再选择文件-导出为web所用格式，选择GIF格式就可以成功导出GIF图了。

    帧动画

方法二：png序列导出GIF图

  1. 在AE中Ctrl+M打开渲染队列，点“输出模块”打开设置，将“格式”改为[Png序列]，“通道”改为“RGB+Alpha”，设置完成后点击“渲染”，得到一套完整的png序列图；

    png序列

  2. 加载序列图：打开PS，点“文件-脚本-将文件载入堆栈”，浏览并选择全部序列图点击“确定”；

    导入png序列图

  3. 然后创建时间轴：待所有序列图加载完成后，打开窗口-时间轴，点“创建时间轴”。以下步骤就同视频导出GIF图一样；

  4. 点击时间轴右上角展开菜单，选择“设置时间轴帧速率”，将帧速率和AE合成的速率保持一致（在ae中Ctrl+K打开合成设置可查看帧速率）；

  5. 选择“转换帧-从剪辑建立帧”；

  6. 点击时间轴左下角，生成帧动画；

  7. 修改动画顺序：此时动画是倒放，所以点击右上角展开菜单，点击“选择全部帧”，然后点击“反向帧”，将动画正序；

  8. 导出动画：此时动图已设置好，Ctrl+shift+alt+s导出为web所用格式，将杂边颜色修改为图案所应用的界面的背景图层一致或改成“无”，即可导出；

方式三：GifGun导出GIF图

GifGun安装方法

先介绍一下GifGun安装方法，下载链接：http://www.gfxcamp.com/gifgun-v1715/

目前GifGun的版本是：v1.7.15

先安装插件程序GifGunInstaller1.7.7signed.pkg；

安装方法

然后复制gifGun.jsxbin文件到AE脚本目录：Mac路径：应用程序\Adobe After Effects CC\Scripts\ScriptUI Panels\；

复制路径

安装成功以后打开AE软件设置，勾选上允许脚本读写和访问网络；接下来我们就可以使用插件导出GIF啦～

勾选允许脚本写入

GifGun使用方法

先从AE窗口最下边把GifGun插件打开，图片右侧就是GifGun插件。

接着就可以导出需要GIF图了，先设置下需要导出图片尺寸，比如这里我需要导出1125*926尺寸，设置宽度1125px，高度会自动换算的，设置导出位置，先把AE图层选中，也可以在导出之前，先把所有图层进行预合成，然后选中预合成文件，直接点击MaKe GIF动效就导出来了。

设置插件

方式四：Adobe Media Encoder导出GIF图

1.启动Adobe Media Encoder：先选中合成文件，然后选择合成-添加到Adobe Media Encoder渲染队列，启动启动Adobe Media Encoder；

Adobe Media Encoder

2.选择合成下边的下拉三角，找到我们想输出的动画GIF图格式，然后在预设中对GIF图的输出进行设置：输出路径、图片尺寸、输出质量、透明通道等进行设置，然后就可以导出GIF图了。但是一般导出的GIF图质量高体积大，需要我们再次进行GIF体积的瘦身。

预设

影响GIF体积的因素

影响GIF体积主要有三个因素：尺寸、动画复杂度、动画时长

尺寸、动画时长越小，输出GIF的体积也就越小，动画复杂度越低，体积也就越小。影响动画复杂度的因素主要是：颜色和运动方式。相同条件下，色彩越丰富，运动方式越复杂，GIF体积越大。

降低GIF体积的方法

有时候好不容易导出了GIF图，但却因为动图文件太大，导致上传受到限制，或研发说文件太大加载太慢拒绝接受文件，这时候是不是心里有一万只草泥马🦙在奔腾～hahh～

我发现了一个特别好用的网站分享给大家：免费GIF编辑：https://ezgif.com/optimize；收费GIF编辑：https://www.soogif.com/compress；

减小GIF大小的原理

编辑GIF之前，我们要先知道怎样操作才可以降低图片大小。降低GIF大小原理有三个：减少图片帧数、减少图片颜色数量、减少图片大小（宽高像素），接下来我们根据以下步骤完成GIF的编辑。以ezgif网站步骤为例：

减小GIF大小的操作步骤

第一步：

先选择需要压缩的GIF图，点击上传；

上传GIF

第二步：

优化gif

如上图，上传了GIF后，在图片下方我们可以选择优化方法，这里的优化方法就是降低GIF图大小的三个原理；减色、使用单色：就是减少图片的颜色数量，删除重复的帧、删除第二帧、删除每三帧，、每隔4帧删除一次：就是减少GIF的帧数；有损GIF：降低GIF的质量，清晰度；

原图3M，经过优化后图片的质量为500k；

优化后图片

此外，在这个宝藏网站上，我们还可以调整GIF图的动画速度和给GIF增加效果；

变速

以上就是GIF导出的几种方法，GIF格式拥有非常强的兼容性，可以在大部分智能设备上直接预览，在各个平台上的兼容性也都很强。所以GIF成为设计师做概念展示时最受欢迎的格式。

但GIF的缺点也是显而易见的，首先GIF对设备的性能占用很大，有时候满屏的GIF就会让页面卡顿；其次GIF作为一种有损格式，多少会对画面的色彩、质感有些影响；第三，GIF对于透明通道的支持有限，导出会出现白边。

所以，下篇文章我们来分享如何将动效转换成Lottlie，实现动效展示。