JS动画文件制作输出全解析
本文就JS动画文件的制作与输出进行了解析。把踩过的坑都整理出来了，希望大家少走弯路（本文只阐述制作流程，不含动画设计）
随着用户界面设计的多元化发展，已经有越来越多的设计师喜欢以动画的形式对“图标”；“开屏”；“浮窗”等模块进行展现，“动画化”的内容对用户更具有吸引力，也可以更多的展示设计师想表达的信息（含较多GIF文件，建议PC端浏览）
常用的动画文件的制作方法
方法一：直接导出GIF文件
直接导出GIF文件虽然可以缩短动画制作的时间，但其图片质量差和文件过大的问题一直被广大设计师所诟病，建议在少帧且色彩还原度要求不高时使用
方法二：与开发沟通动画样式
开发的同学很多都是设计的门外汉，对于关键帧，位移路径，缓动效果这类词并不理解，很多时候就算设计师拿着做好的Ae文件去找开发的同学，也不一定能很好的还原出你想要的效果（更多情况是人家的电脑根本没有Ae）。往往一个单一图层的回弹动效在开发层面实现都需要N多行代码，更不要说我们做的动画不可能只有一个图层。所以如果不是缩放，透明度变化这种很简单的动画样式，尽量不要麻烦开发的同学，毕竟他们还有那么多Bug要改～
方法三：生成JS动画文件，开发通过Lottie直接调用
既然上述两种方法都有各自的不足之处，那我们就来了解一种开发中常用的动画制作方法：JS动画结合Lottie插件。用此方法不仅可以制作出矢量低文件大小的动画，还可以极大程度的减少开发同学的时间，做到百分百还原动画样式
JS动画制作的流程
JS动画制作的流程可以分为以下四部分，其中前三部分由设计师完成，第四部分交由开发的同学完成
步骤一：绘制静态图层
做动画的第一步当然是做出含有静态图层的文件，这里一定要用AI绘制矢量文件，因为最后生成的JS文件是通过定位各个锚点的坐标来绘制图形的，PS做出来的位图是无法实现的
这里主要强调两点，第一点是绘制完成后要将在同一图层导出的形状进行编组，然后在属性面板释放到图层后拉出总编组，然后删除顶部空白图层
第二点是在绘制描边时一定要选用中心描边，因为AE的描边属性只有中心描边
完成静态图层的绘制后就该把AI文件导入AE了，这里分为两种情况，一种是不含有渐变填充，直接以合成的形式导入然后从矢量图层创建形状就可以了
另一种更为常见的是含有渐变填充，这时需要借助Overlord这个插件来实现AI和AE的文件传输，因为如果直接从渐变图层创建形状会丢失渐渐属性，有兴趣的同学可以实验一下
首先介绍一下Overload这个插件的安装吧
链接: https://pan.baidu.com/s/1jxwzlMIqN_Ntfc0yRrUzgQ 密码: 34sd
首先将Overlord文件夹放入到路径“资源库/Application Support/Adobe/CEP/extensions”中，这一步大家应该都没什么问题；
然后将Overlord文件夹放入到路径“用户/用户名/资源库/Application Support/BattleAxe”中，可能会碰到用户名文件夹没有资源库这个问题，右击查看显示选项，然后勾选上“显示资源库文件夹”就可以看到了，“Application Support”文件夹中如果没有“BattleAxe”文件夹自己创建一个就可以了，注意大小写
安装完成后在AI和AE的“窗口-扩展”中打开就可以了，注意一定要都打开
之后在AI中全选图层选择上箭头或者在AE中选择下箭头就可以完成AI到AE的文件传输了
这里建议勾选上左侧的两个小图标，第一个的作用是分层导入，第二个的作用是使中心点位于图层正中位置
步骤二：制作动态动画
这一部分同学们自己发挥就好，按照自己的想法在AE里作出动画
步骤三：生成JS文件
在AE里制作完成动画后需要借助“Bodymovin”插件生产JS文件
链接: https://pan.baidu.com/s/1cWwkYYY6Izy_WM6FnVGr7A 密码: dp4d
具体的安装步骤大家可以参照这篇文章，写得很详细：
https://zhuanlan.zhihu.com/p/26304609
安装完成后从“窗口-扩展”中打开“Bodymovin”选取文件和路径点击“Render”就可以生成JS文件了
需要注意如果你使用的是中文版本的AE，涉及渐变填充的参数要手动改为“Gradient Fill 1”，“Gradient Fill 2”···涉及渐变描边的参数要手动改为“Gradient Border 1”，“Gradient Border 2”···（Enter可进行重命名）
到这一步我们的工作其实就结束了，给自己鼓个掌吧哈哈，直接把这个JS文件甩给开发的同学就可以了，最后检查一下导出的时候有没有包含热区部分，W后的数值为宽度，H后的数值为高度
步骤四：Lottie引入JS
到这一步其实已经是开发的同学需要做的事情了，我以web端为例给大家演示一下动画最后呈现形式
动画做好之后我们还可以在AE里到打好关键帧查看一下是不是我们想要的效果
