一、前言

Lottie 是 Airbnb 出的一套跨平台的动画完整解决方案，它能够帮助程序员直接加载 JSON 格式的文件在 iOS、Android 和 React Native之上，实现 100% 与设计稿相同的动画效果，而无需关心中间的实现细节。设计师只需要使用 After Effectes 设计出动画之后，通过使用 Lottic 提供的 Bodymovin 将设计好的动画导出成 JSON 格式的文件交付给开发即可完成。

二、为什么要用 Lottie？

1. Lottie的优势

对于不同的工作角色，Lottie 给你带来的都是更简洁的工作流。

如果你是 Designer，你可以充分发挥你的动画设计天分，Path,flat等风格动画最终都会被 100% 的还原。

如果你是 Engineer，你可以通过简单的导入和有限的代码，就可以实现设计师要求的动画，并且相比较传统的 Gif 或者帧动画而言体积可算十分娇小，再严苛的项目资源要求都能轻易满足。

如果你是 Product Manager，你的产品将具有更人性化的酷炫动画和交互效果(可手动设置进度、绑定手势、事件等，可网络加载、动态控制播放速度等)而这并不会带来开发周期的延长。

2. Lottie的劣势

整体来说，Lottie 是一个优秀的项目，它能解决很多关于动画上的沟通问题和提供解决方案。可它依然有一些不足的地方：

系统版本限制，Android(Api 14+) 和 iOS(>=8.0) 都有不同的版本限制。

有一些交互动画，不被支持，哪怕导出了也无法被正常执行。

Bodymovin 插件还有待完善，有些 After Effects 实现的效果，无法被正常导出。

三、进入Lottie工作流

1.  必备的工具

After Effects(新版本的 Bodymovin 5.4.2 已经从CC2014一直支持到CC2019，所以你可以根据自己的使用习惯选择其中的任意一个版本。)

Bodymovin( 最好选择最新的版本，因为已经尽可能的解决了已知的使用中的问题。)

ZXP Installer( 插件安装和卸载的三方安装软件，官方的已经从CC15后不再支持官方插件安装，所以需要三方安装器。强烈建议使用这款插件，因为有卸载功能)

Lottie Preview(手机端预览APP，商店直接下载安装即可)

lottiefiles( 本地文件可以上传到网端，项目可以通过链接调取，不需要本地打包资源)

2. Mac OS上安装

确保已经安装 AE 需要CC2014版本及以上。

下载 Bodymovin 得到后缀为 .zxp 的文件。

下载 ZXP Installer 第三方安装软件，双击名为 aescripts   aeplugins - zxp installer.dmg 的软件包，按照提示将左边的 ZXP Installer 拖入右边的 Applications 文件夹，完成安装。

4. 进入启动台点击打开 ZXP Installer，将 bodymovin.zxp 文件直接拖入一直选择✅即可完成安装。

5. 然后打开 AE，在顶部菜单 After Effects CC > 首选项 > 常规，勾选上 允许脚本写入文件和访问网络，点击确定。

6. 最后在顶部菜单 窗口 > 扩展 中能看到 bodymovin，那么安装就算完成了。现在可以开始使用 bodymovin 的导出功能了。

3. 支持效果

使用 AE 制作动效设计时，由于 bodymovin 插件自身的限制，目前支持的导出效果比较局限，简单的三方插件效果有些可以通过转化为关键帧导出，这是没问题的。但是复杂的或者不能转换为关键帧的动画则无法导出。可以尝试使用 bodymovin 的另一种导出方式，这个我们后面会详细解说到。

下面是 bodymovin 插件具体支持的效果类型和终端类型，制作动画时，可以参考表格去适配。

4. 其他支持属性

图层特性(Layer Features)

预合成(Precomps)

图像图层(Image Layers)

形状图层(Shape Layers)

空对象(Null Layers)

固态层(Solid Layers)

父子级关系图层Layers(Parenting Layers)

Alpha蒙板图层(Alpha Matte Layers)

支持中继器变形(Supports repeater transforms)

5. 目前还不支持的After Effects 特性( ios)

合并形状(Merge Shapes)

反相蒙版(Alpha Inverted Masks)

裁切路径中的个别裁切形状功能(Trim Shapes Individually feature of Trim Paths)

表达式(Expressions)

3D图层(3d Layer support)

时间重置/ 图层反相(Time remapping / Layer Reverse )

图层混合模式Layer Blend Modes

图层效果 (粒子场)Layer Effects

当前不支持偏移量 Offset currently not supported.

了解了这些属性之后我们就可以开始制作属于自己的 Lottie 动画了。

6. 导出 Json

我们根据上面的这些属性制作完动画后，就到导出的工作部分了，那么我们应该如何导出呢。

直接在顶部菜单中选择 窗口 > 扩展 > bodymovin，会出来以下界面。

在 bodymovin 页面中我们有三步工作需要完成。

选择需要导出的合成文件。

进入设置选择导出的属性。(在导出设置中一共有9种选项，一般默认的选择第二种字体图形化选项就行，在之前的内容中，我们曾提到 bodymovin 实际上是支持导出不同类型的动画的，这里可以大致总结成两种。1、矢量动画，这种文件的要求是，所有的文件都需要转换成 AE 自身的路径图层，AI的矢量文件可以直接在图层上右键转换成 AE 路径，不需要重新绘制，优点是导出的动画文件是纯的 Json 文件体积非常小，缺点是使用纯 AE 路径的话画面的丰富度和饱满度会降低。2、帧动画，这就很简单了直接是帧序列动画，不过要注意的是在导出的时候要在设置中勾选 图片资源设置 > 转成base64 直接将图片资源打包到 Json 文件当中，不然上传 lottiefiles 官网会直接画面丢失，本地预览是没有问题的，这块优缺点正好相反，优点是可以实现任意的动画效果，缺点就是整个Json文件下来的体积会非常的可观。最后在导出的时候也可以选择演示模式，会附带一个 html 的网页文件作为预览使用，当然 bodymovin 自身也可以预览导出的文件效果。)

3. 选择保存路径。

7. bodymovin 使用过程中的坑和怎么填

1.自建图形渐变颜色丢失解决办法：

默认渐变填充组名字为“渐变填充+序号”需要修改为“gradient+序号” bodymovin 插件不识别中文的名称，所以名称下面的值会丢失。【与插件版本无关 与 系统和软件的语言无决定关系(英文系统会自动更改名称所以不会出现问题，中文只要修改渐变组名称为英文效果也一样，如果源文件是中文系统下创建的，修改英文系统后并不会自动修改组名称，所以还是需要手动修改，所以这这之间不是根本性关系。)】注意修改完文件后一定要保存后再执行导出，要不然颜色依然会丢失。

2.bodymovin关于图形动画导出的解决方案：

bodymovin不光可以支持自建矢量文件导出，还支持图片和序列帧动画的导出，在本地预览时导出参数不需要修改，可以直接回到插件内预览，不会出现问题。但是如果要上传 lottiefiles 通过链接调用导出时一定要勾选 图片资源设置下的 转成base64 选项，将图片资源一并保存到JASON文件中，这样上传时才会正常显示，不然会图像丢失。

3.动画在创建时，素材中使用的矢量文件需要通过图层右键重新转化成 AE 图形，不然仍会以图片的形式导出。

4.在导出帧动画后，如果是本地使用的话，图片包是可以替换的你懂的，如果对图片的大小和质量不满意可以自行进行后期的调节替换，不会影响使用。

5.一些三方插件是可以导出的这需要自己去尝试，比如 duik 骨骼动画插件，如果想导出完整的动画需要对动作的每帧打点就行。但是不支持 duik 中的形变功能。

6.可以使用表达式制作动画，不过导出前需要用烘培工具，把表达式烘培成关键帧。(插件名称：Aescripts Easy Bake 可自行百度下载。)

四、总结

整体来说还是不错的！在流程和实现效果上 bodymovin 提供了另外一种做动画的全新方式，尽管有些功能点还是不支持，毕竟也是在初期阶段，但是相信，不久的将来，这些就不再是问题了！要知道，在这之前，我可是通过画动画分解图来和开发们沟通的！