2020年伊始，中国互联网已经快30岁了。技术的革新使得用户对产品的细节感知度有了更高的要求，打造产品风格的差异化逐渐成为 APP 的主流趋势。如今我们随手打开一个APP，动效的使用的越来越普遍，动效的职能渐渐从为APP 锦上添花变为必不可少。

二、交付方式分类

目前市面上，针对动效输出与落地主要还是围绕着基础的几种输出方式，我总结了几种设计师较为通用的几种输出方式。这几种方法各有优势，大家可以根据自己使用场景和需求选择。

三、导出的方法

   NO.1  图片/视频 

直接交付给开发 gif 或者帧序列图片、视频，这种方式是后续验收时最省事的一种。因为你给开发的啥样，最后看到的就是啥样。

a) 最简单的导出方式是视频，Ae 和 Priciple 这两个主流的软件都可以直接导出视频，但是导出的视频大小会比较大，直接用于开发会比较占用内存（交付之前可以用pr压缩）。

需要注意，如果你在 Ae 里做的是无背景的，在导出时候需做特殊设置。在合成操作框下方，点击切换透明网络，添加到渲染队列后，需要把通道改为 RGB + Alpha，另外，我对比过有无背景的视频大小，发现透明背景的视频会偏大一些。

b) 第二种是导出帧序列，这个在 Ae 种也是可以直接导出，输出模块设置里格式选择 png 序列即可，这种方法比较适合帧数较少，比较简单的动效。另外推荐大家在交付给开发之前，将 png 图片进行压缩，这样占用内存会小一点。

c) 第三种是 gif ，这个用的最为普遍。同样 Priciple 可以直接导出，Ae 需要安装插件，用的比较多的比如：GifGun、GIF Brewery3，但是一般不建议大家使用，我用过几次后，发现这些插件导出的 gif 质量都不是特别高。Ae 可以在导出视频后，将视频在 Ps 中导出 gif，也可以使用第二种方法的帧序列导入 Ps 导出 gif，这两种方法最后文件大小是一样的。

这里给大家提供一个经验，决定一个 gif/视频大小的主要是：时长、帧速率、合成/图片尺寸。通常，如果是 UI 或者运营活动的动效，帧速率不需要特别大，20 就可以保证较为流畅的效果。时长和尺寸，这个设计师需要自己把握，越小的尺寸肯定最后导出的图片越小。

   NO.2  Lottie/CSS 

a) Lottie 是这几年非常火的动效输出方案了，国内不少大厂都开始使用。早期是由 Airbnb推出的，设计师的一方只需要在 Ae 中添加 Bodymovin 插件，导出一种为 json 格式的文件，开发人员拿到 Bodymovin 输出的 json 格式是无法直接使用的，需要在项目代码中引入 Airbnb 提供的 Lottie 第三方库后才直接读取播放。

使用 Lottie 有不少优势，比如：

1、占用内存小；

2、开发成本低；

3、还原度高，所见即所得；

4、支持服务端 URL 方式创建，无需发版，可通过服务端配置 json 文件，随时替换客户端动画；

5、跨平台，支持 iOS、Android、H5；

6、适量输出，只需输出@1x；

但是他也有一些不足之处，比如当前支持的 Ae 效果有限（适用情况我放在文章最后面），如果动画中位图过多的话，文件也会相对较大，所以更适用矢量动画。

b) CSS实现动效更适用在 H5 中，比如我们常见的一些朋友圈的各个产品的年度报告，复杂一点的都是通过导为 CSS 或者直接由前端代码实现的，这里介绍 

BX-AE2CSS 脚本文件（脚本放在附件，可以自行下载）

安装方式如下：

打开AE, 点击 文件->脚本->运行脚本文件... 然后选择刚才下载的 BX_AE2CSS.jsx。

或者可以复制 BX_AE2CSS.jsx 到AE的脚本文件夹:

Windows:
C:\Program Files\Adobe\Adobe After Effects <版本>\Support Files\Script\
Mac:
/Applications/Adobe After Effects <版本>/Scripts/

这样你就可以从 `文件`->`脚本` 中直接选择`BX_AE2CSS.jsx`了

有问题可以在 Adobe 官网查看脚本的详细使用步骤：

https://helpx.adobe.com/cn/after-effects/using/scripts.html

安装后，可将图层 [ 标记 CSS ] ，对于复杂的动效也可以 [ 标记 精灵图 ]，最终 CSS 和 精灵图 会一起导出。当前标记 CSS 可以导出纯色层和图像图层的「位移、旋转、缩放、透明度」动画，也支持表达式和父子级。但是同样不建议动画过长，否则数据量会特别大。

   NO.3  纯标注交付 

标注交付是最原始的一种方式，类似与页面标注，你只需要将你的关键帧、时长、曲线等信息明确的告知开发即可。

下图就是一个比较详细的动效标注交付

需要注意，设计师在做动画时经常会调整速度曲线，我们也需要将对应的曲线参数提供给开发。在Ae中，按住Alt，可以查看该关键帧的对应速度，也可以下载flow插件，可以直接读取运动数值。

针对交互动画，也就是有触发时间的动画，需要注明动画产生条件。

三、展望

现在动效实现方式日新月异，除了 AE 这种传统工具的解决方案以外，也有更多直接另起炉灶的设计工具。目前应用较广的包括 Principle、Flinto、Framer 等等。当然这些新的工具无一例外加入了可交互的特性，也是如今动效的新趋势。

相比之前，我们可以在设计阶段就感受产品的「观感」，现在的动效，可以让你更多的 体会到产品的「触感」。

Powered by Froala Editor