如今，动效在UI设计中的比重越来越大，而设计师设计出炫酷的动效只是整个过程的第一步，如何把设计出的动效输出给开发并且最大化的还原动效才是整个流程中最大的难点。恰巧豆豆我日常的工作中会需要做一些动效并且和开发对接实现，所以总结了这一份动效的输出落地指南，希望能给设计师提供一些有益的帮助（文中的内容均为自己工作经验总结，可能会有部分纰漏，有错误的地方，欢迎指正。文章中涉及到的插件及软件下载地址均附在文末）

在正式实操之前，先简单了解一下动效在产品设计和用户体验中的类型和作用，更好的理解整个动效设计及落地过程。

动效的类型

第一种：交互型动效

交互型动效主要用来引导用户交互、展示页面路径，帮助用户更好的理解页面逻辑，操作流程等。下面的动图就是典型的交互型动效：

（配图源自dribbble，如有侵权请联系我删除）

具体例子包括：

1.弹窗入场出场转场动效

2.滑动列表元素变化

3.下拉刷新

4.点击tab栏icon动效

...

特点：

需要标注动效前后静态设计稿，需要输出交互演示视频供开发参考，并且需要给到开发具体动效参数。（例：用户点击后弹窗尺寸100%-30%，透明度100%-0%，y轴位移100px，动效持续300ms）

第二种：视觉型动效

视觉型动效主要通过动态效果吸引视觉、进行营销活动或者用来传达品牌调性或者进行情感化设计，这类动效大部分都不是必须的，但加上之后可以有效提高营销活动转化或者提高用户使用产品时的愉悦度。如下面这个界面里的banner动效和浮窗动效。

具体例子：

1.页面促销icon动效

2.加载动画，无交互的引导页动画（特殊例子，有交互的引导页动画，比如telegram的引导页）

特点：

一般需给到开发动画文件（具体输出方式后面会说），开发控制播放即可，无需标注动效前后状态及具体动效参数。（例：首页左上角放置营销活动入口动效，给开发标注好icon尺寸（动效输出后尺寸）及位置即可）

当然，上面只是豆豆根据自己的经验进行的简单分类，并不是权威的分类方法。实际工作中可能会涉及一些类型不是很绝对的动效，有些甚至是兼具了两者的特点的。这就要根据自己的经验来区分选择如何来进行开发对接了。

动效开发前

在动效开发前，要给到开发小哥一些素材供其参考，从而选择具体的实现方式，下面列出的是豆豆我在动效对接时会给到的资源。

1.动效视频输出供开发参考：

视频可以让开发大致了解动效效果，可以进行开发前的技术选择和开发完成后的对比自检，确保动效是设计师想要的样式。

2.动效开始前后静态稿标注：

如某元素动效开始前和动效完成后的位置尺寸等，这种一般只需要输出两张界面后上传蓝湖自动标注即可。

动效开发中（具体输出方式）

1.开发直接使用代码实现：

这种实现方式仅限于非复杂动效。位移、透明度、缩放、旋转一类的基础动效可以直接给开发数值及时间，如果有增加缓动等特殊速度曲线，可以用flow输出贝塞尔曲线的关键值，输出值（a,b,c,d）给到开发即可。（不过这种开发方式会比较消耗开发时间，所以有时开发小哥会不愿意按照数值实现，豆豆在工作中也只使用过一次，之后因为开发小哥不是很乐意在上面耗费时间，所以就没有再用过了）

flow使用方法：

    1.安装flow插件

    2.点击窗口>扩展>flow

    3.然后把截图标注出来的数值给到开发即可

2.gif：

历史较久开发成本也较小的实现方式，同时有着不错的兼容性，直接输出gif文件给到开发即可，但缺点也很明显，体积大，质量差，尤其是透明背景时毛边明显。页面中使用过多会严重拖慢加载速度，影响应用性能。（设计时如果没有考虑，最后弄的满屏gif，虽然你的设计演示狂拽酷炫吊炸天，但是用户使用时卡顿，掉帧，甚至加载不出来简直就是灾难。）

输出方式：

gifgun插件直接输出；ae导出mov格式后放到ps里导出GIF（ae原生导出的gif不支持透明背景，所以只能使用gifgun输出，或者曲线救国，先导出支持透明背景的mov视频，再用支持透明背景的ps导出gif。）

具体操作方法：

一、gifgun导出：

    1.安装好ae及gifgun插件后

    2.点击【窗口】

    3.选择【gifgun】

    4.点击齿轮icon调整输出选项

    5.点击【生成gif】等待渲染输出

    6.把gif图甩给开发哥哥并享受其仰慕的目光(๑•̀ㅂ•́) ✧

二、ps导出

    1.点击合成>添加到adobe media encoder渲染队列

    2.选择输出格式为quicktime（这一步特别要注意选择输出alpha通道）

    3.点击右上角三星形输出icon，视频输出完成后将视频拖入ps中

    4.点击文件>导出>存储为web所用格式

    5.选择gif（根据需求选择质量等参数，如果有透明背景记得勾选透明度选项）

    6.点击存储输出

    7.把gif图甩给开发哥哥并享受其仰慕的目光(๑•̀ㅂ•́) ✧

3.png序列：

png序列是豆豆我在之前的工作中使用最多的动效实现方式。其原理比较简单，就是n张png图片连续播放就成了动画。相比于gif他的效果极好，只要给到开发的png序列图没有问题，基本不会出现画质的损失。但是它的缺点也让我不得不放弃了这种方式-那就是体积巨大，而且与开发对接时需要交接多张图片（以60帧/s的动画为例，如果你的动效持续了1.5s，那就会导出90张图），稍有不慎就会出问题，而且有时开发不能直接使用你导出的图片原名还需要批量改名（或者把图甩回给你，让你帮他批量改名，摔！），这些都间接增加了工作量。

    具体操作方法：

    1.进入要导出的合成

    2.点击合成>添加到adobe media encoder渲染队列

    3.选择输出格式为png（如果动效包括透明背景需要选择带alpha的png序列）

    4.点击箭头icon等待输出完成

    5.把png序列打包好甩给开发哥哥并享受其仰慕的目光(๑•̀ㅂ•́) ✧

4.apng与webp：

apng是一种较新的动图格式，是基于png的动图格式（但最终只输出一张图片）特点是质量要好于gif，而且同等质量下体积也比gif小一些。支持透明背景的同时也没有恼人的毛边。开发实现起来跟gif类似，开发难度较小。不过apng也有一个暂时的缺点，那就是兼容性比不上gif。

webp是谷歌开发的一种图片格式，特点与apng类似，也是一种质量和体积比较平衡的图片类型，telegram的动态贴纸和play store的图片大都已经采用了这种格式。

根据我司开发小哥的实际体验，Android 4.0以后，iOS11以后，以及微信小程序都支持apng及webp，是一种值得一试的动效输出方式。

    具体操作方法：

    1.首先根据上面说到的方法导出png序列

    2.打开神器isparta（资源链接附在文末）

    3.全选需要导出的动效的png序列直接拖到软件中（这里需要注意一下，框选的情况下软件默认按照命名顺序导出动画，点 选时按照点选顺序导出动画）

    4.右键项目选择输出路径

    5.在右侧设置帧频（比如动画做的是60帧/s，这里就填60）、循环次数、质量、文件类型

    6.点击开始，输出apng或webp

    7.把apng或者webp图甩给开发哥哥并享受其仰慕的目光

需要特别注意一下，apng的文件后缀名还是png，webp的文件后缀名是webp。两者必须使用浏览器预览才能看到动效，默认本地是看不到动效的。豆豆我第一次使用的时候导出了10多次在本地预览都不动，最后上网查了才知道必须浏览器预览，摔！

5.lottie

lottie是airbnb开源的支持iOS、Android、React Native的动画库。通俗点说他可以将你的动效转化成代码，省去了开发哥哥手写这些代码的过程。使用lottie的好处很明显，体积小（1个原本1mb的gif使用lottie实现体积也就20kb左右），性能好，效果好，开发简单。但有个缺点就是不兼容微信小程序，或者说是微信小程序不支持lottie，不过根据微信小程序开发社区的反馈，不排除日后支持的可能。

lottie的使用很简单，使用前跟开发哥哥沟通好，让他们事先在app中引入lottie库。（我司开发小哥表示最多只需要半天即可）一次引入，以后就可以一直使用了。而设计师需要做的就是使用AE的bodymovin插件（资源见文末）导出json文件开发即可。如果动效中有用到图片资源还会导出一个image文件夹，文件夹中包括了动效中的图片资源，需要一起打包给到开发。

    具体操作方法：

    1.点击窗口>扩展>bodymovin

    2.点击左侧选择框选中要导出的合成,点击右侧三个绿色的点选择输出路径

    3.最后点击【Render】进行输出

    4.找到刚才设置的路径将json文件和images资源文件夹打包给到开发哥哥并享受其仰慕的目光。

最后输出的资源就像上面展示的，一个json文件和一个images文件夹

上面就是我工作中接触到的一些动效输出落地的方法，每种方法都有优缺点，没有哪个是最好的，只有根据实际工作中的情况和开发能力选择最高效的方式。如果你恰巧看完了这篇文章，我建议去亲自尝试一下这几种方式，对整个方式的内在原理有个大概的了解，可以对日常工作有很大的帮助。最后，与君共勉，一起加油！

附上资源链接：https://pan.baidu.com/s/1eOACQdrmI8f4B32BW8RrAw