在互联网应用以及设备硬件性能不断发展的如今，动效的需求越来越大，越来越多的app开始出现更多的动效效果，而传统实现方式的缺点和局限性比较明显。如png序列需要多次请求，在web端访问下变得不实际，雪碧图文件又太大，且在不同屏幕分辨率下可能会失真，所以想达到更好的效果就需要开发直接把动画用代码写出来，而现在使用各平台的 native 代码实现一套复杂的动画是非常困难并且耗时的事，我们需要为不同的屏幕适配不同资源，还需要写大量过几天连自己都不认识的代码。在市场需求的推动下，Lottie 应运而生。
现在在很多互联网招聘信息里很多都写着要求会做 Lottie 动画，而找朋友要一份文件看看到底是什么，结果人家甩过来一个 JSON 文件，打开一看全是代码，一下脑子就大了。
那么，Lottie 到底是什么呢？其实，Lottie 只是一种库的名字（这里不做专业的解释，只是为了让设计师理解个大概）。这里就要先解释一下什么叫库，库可以理解为一种规则，打个比方，如果直接给你 0 0 0 这么三个数，那么你肯定一脸懵，那么如果在 0 0 0 前面加上 RGB 变成 RGB:(0,0,0)那么你就知道这是个黑色，如果前面加上 XYZ 变成 XYZ:(0,0,0) 那么你就知道这是原点。那么前面的 RGB 或者 XYZ 等这些，我们可以理解为是以何种规则去读这三个0，而这个规则会有无数种规则，将这些所有规则打包整理起来成一体，这个一体的东西就叫库。
曾经有一个叫 Hernan Torrisi 的人把他在 After Effects 中制作的动画导出成了一个后缀为 JSON 的数据文件，里面有一大堆代码，然后又制定了一套如何解读这套代码的库，这个库就取名叫 Lottie。那么可能有人会问导出的文件是 JSON 格式的为什么不直接叫 JSON 多方便，其实了解代码的人会知道，JSON 常规来说是一个很普通的存放数据的文件格式，我们可以简单举例为就是一个 TXT 文件，这个 TXT 里面什么文本都能放，我们不能说里面放了一段英文，以后就把所有英文都叫 TXT，这才是不合理的。
而之后人们就把这种调用 Lottie 库的一系列相关文件与操作简称为 Lottie。当你跟前端说这个用 Lottie 实现时，前端就知道你会给他一个 JSON 文件或者一个包含 JSON 和链接图片的 zip 包，而他也知道需要调用 Lottie 库来读这个文件。
Lottie动画是由 Adobe After Effects 制作，所以要保证自己电脑里有 After Effects 软件，这个的安装很简单，就不做过多赘述了。因为一般 BodyMovin 都是使用较高版本，所以建议 After Effects 软件版本也高一些，以免出现版本不匹配造成的bug。
打开 After Effects 后要先勾选上首选项中的“允许脚本写入文件和访问网络”，才能正常打开插件。这里以2020版本为例，依次选择菜单栏中：
Edit>Preferences>Scripting & Expressions>Allow Scripts to Write Files and Access Network
编辑>首选项>脚本和表达式>允许脚本写入文件和访问网络
脚本是一系列的命令，它命令应用程序执行一系列操作。大多数 Adobe 应用程序中都使用脚本来自动执行重复性任务、复杂计算，甚至使用一些没有通过界面 UI 直接显露的功能。默认情况下，脚本都不被允许写入文件或通过网络收发通信，所以需要手动打开控制项。
导出 Lottie 文件需要将 After Effects 切换为英文版，如果使用中文版，LottieFiles 会找不到文件中的合成，而 BodyMovin 在虽然可以正常导出，但是很多情况下会出现很多bug，比如渐变色不识别，透明度不识别等，后期排查会很费时，所以一般情况下还是要先将 After Effects 切换为英文版之后再开始做素材导入、动画制作等操作。
Adobe After Effects cc2020中英文切换需要先在以下地址找到 application.xml 文件。
win：
默认安装地址——C:\Program Files\Adobe\Adobe After Effects 2020\Support Files\AMT
自定义安装地址——自定义地址\Adobe After Effects 2020\Support Files\AMT
mac：
Finder-前往文件夹：/资源库/Application Support/Adobe/After Effects/17.0/AMT/
找到文件后先复制到桌面，然后再打开，因为如果直接本地打开修改后是无法直接保存的。找到里面的语言类型并修改成需要的语言，zh_CN 为中文，en_US 为英文，保存后替换原始文件。修改完成后再次打开 After Effects 就会变成所设置的语言。
ZXP 格式的插件需要使用与之配套的 ZXP Installer 软件来为 After Effects 安装，网上有些科学版插件本身也是ZXP 格式的，只是别人经过科学处理之后可以直接放入 After Effects 相应的文件夹下就可正常使用，用这个软件依然可以很方便的进行管理。我们需要先安装好这个扩展管理器才能继续安装 Lottie 插件，包括要从 Sketch 和 Figma 导入素材的时候也需要这个来安装插件。下载地址
Windows 系统下载好 ZXP 格式的插件后双击打开就可以自动唤起 ZXP Installer 并安装到电脑对应版本的 After Effects 中。Mac系统先手动打开 ZXP Installer 后将插件文件拖入界面内以安装。
XXX.psd 格式的文件是可以直接导入 After Effect 的。
1. 栅格化效果
为避免 Photoshop 中使用的效果 After Effect 无法完美识别，或 Lottie 资源库无法支持，建议导入前先将效果栅格化，过于复杂的效果不建议做动画。但是作为一个专业设计师，保持文件可再编辑性也是很重要的一件事，所以可以适当考虑将图层转换为智能对象（智能对象相关说明请移步Photoshop教程）以便再次修改。
2. 图层整理
Photoshop 制作的文件可能会有非常多的图层，每个图层导入 After Effect 的时候也会生成一个图层以进行动画制作，如果不加以整理就会导致 After Effect 中的图层过多，大幅增加动画的制作难度，所以应适当的减少或合并图层，也可以转换为智能对象，并建议不使用或少使用遮罩蒙版等效果，以免后期制作或输出的时候出现效果不支持或动画落地后 cpu 占用过大的问题。
3. 导入选项
XXX.ai 格式的文件导入 After Effect 与 psd 文件导入 After Effect 基本相同。
1. 整理效果
尽量将效果简化，这里举出几个常用的属性。
剪切蒙版：虽然简单的剪切蒙版属性可以被识别，但是如果内容较为复杂，矢量化后会出现其他属性，影响 Lottie 导出的稳定性，建议先用路径查找器把图形合并成基本形状，如果一定要保留或者后期要做动画变化，可以先拆解开，并分成不同图层，导入 After Effect 后再进行从新建立遮罩属性，但需要注意的是，再安卓系统下，因为安卓本身算法的问题，遮罩会非常消耗硬件性能，每一层元素遮罩后的消耗会成倍增加，所以建议避免使用遮罩效果，或将遮罩内的元素尽量减少，如拼成一张图片等。
投影、模糊、渐变：虽然 After Effect 中也有相关效果，但是算法并不相同，所以导入之后会出现错误，这里可以先将原始文件另存一份备份保留，删除相关属性后进行导入，然后参照原始文件的属性参数使用 After Effect 从新制作。
透明度：透明度属性在矢量化之后也会消失，所以需要参照原始文件在 After Effect 中从新制作，而在 After Effect 中透明度属性可以在三处调整，填充属性、形状组属性和图层属性，具体加在哪一层属性可以根据后期需要制作的动画效果进行调整。
虚线：可以导入并进行矢量化，但是会被拆分成多段，不易进行效果制作，建议同投影等相同，先取消效果，置入 After Effect 后在描边属性内加入虚线效果以制作。
外观： 带有外观属性的图层转换为矢量图层后会生成很多干扰数据，如果是想要以矢量图层做动画的元素尽量将外观属性去掉，转换为矢量后在 After Effect 再处理。
2. 拆分图层（图片素材文件来自网络）
相信很多人用 Illustrator 做设计的时候并没有太过于注重图层，很多时候都是在一层里就直接把设计做完了，这样的文件直接导入 After Effect 时也会只有一层，转换为矢量图形的时候也会把所有内容放到一层。这些内容在置入 After Effect 后想要拆分开会很难，所以在导入 After Effect 之前将图层拆分好就变得至关重要。
比如这张图，很多人用 Illustrator 做完设计之后图层内都只有一个图层，这时导入 After Effect 到的时候就会只有一层。而且，在转换为矢量形状之后，所有的形状也将会集合在一个大的形状图层中，这样非常不利于后期做动态效果。
我们需要先将需要独立出来的每一套元素整理好。然后在图层面板中选中上一级的图层，点击右上角的选项，选择“释放到图层（顺序）”，这时我们就可以把每一个元素拉到第一级的目录下了，同时原来的图层就变成了空白图层，可以删除了。将图层释放之后再根据需要将图层命名，再置入 After Effect 中就会是我们想要的独立元素的图层了。 Illustrator 的导入选项可参考 psd 相关导入选项。
3. 导入选项
Illustrator 的导入选项与 Photoshop 导入选项基本相同，可参考 psd 相关导入选项。
4. 素材矢量化
Illustrator 中的矢量图形都可以转换成 After Effect 中的矢量形状，而未被矢量化的图层将会以图片的形式进行导出。做动效之前优先将所有需要矢量化的图层转换成矢量路径，而不需要矢量化的图层保留，如不需要做动画的元素或Lottie不支持的效果，还有硬件性能消耗巨大的效果等。转化矢量路径也可以检验效果是否整理完善，如有些效果有遗漏或处理有问题，可以返回 Illustrator 中再次修改后，整个文件从新置入或单层重新加载素材来更新图层。这一步如果在做完动效之后再做或者做一部分效果转换一部分，重新加载素材的时候有可能会出现偏差。
sketch 和 figma 文件导入 After Effect 之前也要先整理效果与图层。将不支持的效果拼合成图片，比如角度渐变等。将复杂形状拼合成路径，包括四个圆角度数不相同的矩形，这些在 After Effect 中也是无法直接实现的。
sketch 文件导入需要使用的插件早期叫做 Sketch2AE ，支持到 sketch 51 之前的版本，因为这个版本已经过于老旧，这里就不着重提及了。sketch 51 版本之后的插件改为 AEUX ，下载地址。无论是 sketch 还是 figma，当导入文件时出现报错或者再某个位置卡住等问题，优先检查插件是否有更新。
下载完成之后压缩包里面主要有三个套文件，一套 sketch 插件文件，一套 figma 插件文件，一套 After Effect 插件文件。
1. Adobe After Effects
无论是 sketch 还是 figma 文件想导入 After Effects 中，都需要在 After Effects 中安装 AEUX 插件作为接口来使用。直接使用 ZXP Installer 进行安装。
打开 After Effects 后在工具栏找到：窗口>扩展>AEUX。就可以打开 AEUX 面板。
之所以把 After Effects 放在前面，是因为需要现在 After Effects 中设置好需要导入的形式以及规则，之后在 sketch 和 figma 中点击 Send selection to Ae 就可以将所选元素按照设置好的规则导入。
小提示：倍数关系将会体现在形状组的缩放上，而并非直接体现在形状大小上，这样在做有些效果的时候计算变化量就会变得混乱。
比如我们在一个 400 * 400 dp 的画板中创建一个 200 * 200 dp 的矩形，以3倍图导入后，矩形的大小依然是 200 * 200 px，但是矩形组的缩放变成了300%（实际显示像素为 600 * 600 px ），合成大小为 1200 * 1200 px，这样就会让整个效果制作过程变得异常复杂：矩形的大小变化量要在1倍图的系数下计算，哪怕同样是位移变化，形状的位移变化量要在1倍图下计算，组的位移和合成的位移变化量要在3倍图下计算。如果导入之前先将设计稿从逻辑像素转换为物理像素，也就是直接放大三倍，以1倍系数导入后，合成大小为 1200 * 1200 px，矩形的大小为 600 * 600 px，之后所有变化量都为物理像素变化量，计算系数就相对统一了。
Detect parametric shapes
如果选中的话会保留基本形状属性，如设计软件中的矩形导入后会以矩形形状保留，可以设定宽度、高度和圆角等属性。不选中的话会以路径形式导入，效果相当于将形状转换为贝塞尔曲线路径。但这里要注意的是并不是所有属性都是可以置入 After Effects 中的，比如不同的圆角角度等，这些效果 After Effects 是不支持的，所以想还原视觉稿就需要以路径形式导入。
Precomp groups
如果不勾选此项，会将组创建为不可见的参考线图层，作为组内元素的父级一起导入。勾选此项，导入时会自动为组创建预合成。
Precomp
将导入组时生成的参考线图层和组内元组合成预合成。先选中导入组时生成的参考线图层，然后点击 Precomp 就会将组自动整合成预合成。
Un-precomp
将导入组时生成的预合成拆分成参考线图层和独立元素。
Toggle guide layer visibility
隐藏或显示参考线图层。导入组时生成的参考线图层大小与组的大小相同，并覆盖在组内元素上层，在显示参考线图层的时候点击组内元素会优先选择参考线图层，可以方便的移动或控制整体组的元素。而隐藏参考线图层的时候点击就会直接选择到组内元素，方面制作细节动画。
Delete guide layers
如果不需要组生成的参考线图层，点击后会全部删除。
2. sketch
aeux.sketchplugin 就是 sketch 的插件安装包，和其他 sketch 插件一样双击就可自动安装。在工具栏中找到：插件>AEUX>Open panel 就可以打开 AEUX 的控制面板。sketch 上的 AEUX 的面板主要有三个选项，其中位于下方两个选项主要在做导入准备时使用。
Send selection to Ae - 将所选内容导入 After Effect
先选中元素，点击之后就会自动导入 After Effect。可以是画板中的其中某一个或几个元素，也可以是整个画板，也可以是图片。如果需要导入的是图片，则会弹出弹窗，需要选择一个图片的保存地点用来置入 After Effect，切为了避免图片命名导致图片被导出时覆盖，图片将自动编成乱码以作区分。个人不太喜欢这种乱码的命名格式，所以习惯手动导出图片后再手动置入 After Effect 中，或者手动导出一套命名后的图片，然后去 After Effect 中手动原位替换素材。这样的好处是在制作的过程中觉得某张图片需要微调，在不需要调整图片大小的情况下，可以直接覆盖原始素材而不影响 After Effect 中已制作好的动画，如果是乱码的话覆盖素材的时候会不方便。
Flatten shapes - 合并形状
过于复杂的布尔运算会加大 After Effect 的计算量，也会使动画制作变得更加复杂，所以在导入 After Effect 之前应先将路径合并掉。此选项可以将所有选择的形状一键合并，不需要每一个单独合并操作一遍。
Detach symbols - 分离组件
复杂的组件在导入 After Effect 中因为逻辑并不相同可能会出现错误，所以在导入之前应先将组件分离。此选项可以将所有选择的组件一键解除，不需要每一个单独解除操作一遍。
3.Figma
该插件尚未在 figma.com/plugins 上发布，因此安装过程要复杂一些。
右键单击画布，然后找到：Plugins>Development>New Plugin…
在弹出的页面中点击虚线区域中的 click to choose a manifest.json file，然后选择安装包中 AEUX Figma 文件夹下的 manifest.json 文件就可以安装上了。
安装好之后右键单击画布，然后找到：Plugins>Development>AEUX 就可以调用
制作的时候要注意选择Lottie文件支持的效果制作，如果超出支持范围，则需要试用其他方式处理，比如将效果整合成图片或者序列帧等。
