在互联网应用以及设备硬件性能不断发展的如今，动效的需求越来越大，越来越多的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 中的图层过多，大幅增加动画的制作难度，所以应适当的减少或合并图层，也可以转换为智能对象，并建议不使用或少使用遮罩