lottie插件_Lottie 入门指北

一篇也许有点过时但我认为依然值得一看的文章。

Lottie 的原理说起来很简单：在 Ae 中做好动画后使用插件导出成 json 文件，在程序中引入 Lottie 框架，就可以显示动画了。

事实上，一旦开始真正制作，就会遇到各种问题，尤其在初期安装插件上。

1.使用什么 Ae 插件导出 json 文件？

Bodymovin

2.Bodymovin 插件如何正确的获取、安装和使用？

参照文档指引，顺带一说， Lottie 的文档和 github 页面写得非常好，指引极度清晰。

3.Bodymovin 插件及 Lottie 支持 Ae 中的哪些效果？

见文档说明。

https://airbnb.io/lottie/#/

4.Sketch 中的图形怎么导入 Ae？

• 导出为 svg 后再转成 ai 文件
• 使用 Sketch2Ae 插件从 Sketch 直接导出到 Ae

补充：现在插件已经全新改名为AEUX

5.Sketch2Ae 怎么正确获取和安装？

遵循文档指引，到官网上获取和安装或者自行 google 搜索出来的第一项。

注意：不要使用 Sketch 里的 Runner 插件命令行安装，搜索到的是国内开发者开发的另一个同名插件，并不是 google 团队开发的版本，有兴趣可以从以下链接了解两者关系： https://zhuanlan.zhihu.com/p/28828769

6.Sketch2Ae 怎么使用？

参考官网上的详细步骤说明，再顺带一说，Sketch2Ae 官网上的使用教程也非常清晰。

7. svg 转成 ai 文件后，导入 Ae 前要做什么处理吗？

自行 google。

8. ai 文件怎么导入 Ae ？

自行 google。

9. 使用 Sketch2Ae 导出的渐变图层变成了位图怎么办？

• 那就使用位图；
• 在 Ae 里重绘图形；
• 去除渐变效果，导出图形，在 Ae 里重新添加渐变效果；
• 看下一部分的解决方法；

10. 开发文档中写明支持渐变但是为什么导出的变成了黑白渐变？

这个问题官方文档中没有描述，很有趣。 我在 github 的 issue 上逛了半天，出现这个问题的人很多，问题的产生与系统，区域语言设置，软件语言，插件版本，甚至色彩模式都可能有关系，所以提出的解决方法也很多，「对症下药」的难点是变量太多，一时也难以确定原因，只能把看到的方法都尝试一下。

我的系统版本：macOS 10.12.6

软件版本：Ae CC 2017（简体中文）

插件版本：Bodymovin 5.5.18

实测对于本机可行：

方法1： 用任何一个编译器打开 json 文件，搜索如下代码：

"k"

其中 [0,1,1,1,1,0,0,0] = [0,r,g,b,1,r,g,b]，每四项表示一个颜色，首位1/第五位0=渐变位置，r=红色/255，g=绿色/255，b=蓝色/255，颜色换算出来后填进去，以下为例子：

"k"

方法2： 将图层的渐变名称 Gradient 1，实测了一下以下名称：

可行：Gradient / Gradient 1 / gradient 1 / Gradient1

不可行：gradient

后来抽空又测试了一些随意起的英文名称，都可行，识别规律未明，建议还是用以上的名称。

实测对于本机不可行

方法3：

在渐变编辑器里把 TSL 改为 RGB 方法 1 和 3 都来源于以下文章：

https://medium.com/@mehdi.boumendjel/after-effects-x-bodymovin-x-lottie-gradients-black-white-rendering-issue-1ab36f2a2353

以下链接也有提及： https://github.com/airbnb/lottie-web/issues/719

方法4：

保存后再导出 json（一般是问按照上面的方法做了为什么没有效果的人需要的解决方法）

方法5：

合成名字改成 comp

方法6：

Windows 系统下，修改系统区域后修改 Ae 语言，详细参考以下链接：

https://github.com/airbnb/lottie-web/issues/1201

11. 怎么预览我的文件是否正确？

• 使用 Bodymovin 中的生成预览
• 在线地址预览：LottieFiles - Free animation files built for Lottie
• 移动端预览：Lottie Files

12. 图形在 Ae 中预览没有问题，但是最终输出有问题

从 Sketch 中导入时必须是纯粹的图形，不能是由布尔运算计算出来的图形，简而言之，必须使用 Flatten 工具处理图形后才能导出。

13. 我的图形全绿了！

我在一个项目中存在多个合成，每个合成中均有渐变，导出时发现所有的渐变都绿了（其实是都变成了第一个合成的渐变颜色）。 没有在网上搜索过原因，大概能猜到原因：具有渐变的图形，渐变属性都是从另外一个图形复制而来的，之后再进行颜色的修改。虽然颜色不一致，但是渐变的名称都是Gradient1，插件对相同的名称的属性进行了统一处理。

解决方法也很简单： 重命名渐变的名称或者将合成分离到多个项目中都可以解决。

大部分基础问题，会查阅官方文档基本没有问题，值得一看的是关于渐变的问题，不过我也不清楚现在官放层面上解决这个问题没有，希望对看到的读者们有帮助。