やろうと思ってたとやるの間には、実は大きな川が流れているんですよ。

想做和去做之间，其实横亘着一条大河。

Lottie是 Airbnb开源的一套跨平台的动画解决方案。

Lottie 的原理说起来很简单：在 After Effects 中做好动画后使用插件导出为 json 文件，在程序中引入 Lottie ，程序就可以渲染出 After Effects 动画。

从设计角度上看，为什么使用 Lottie？

• 支持 After Effects 中的很多动画特性，设计者可以有更多的发挥空间；
• 支持从代码上对动画进行控制（点击播放、加速和减速等）；
• 减少开发成本；
• 体积小，性能优秀；

对设计者说

对设计者而言，使用 Lottie 意味着对自身更高的要求，事实上，甚至还没开始真正的制作，就会遇到各种问题，尤其在初期安装插件上，所以后面的文章希望能提供给入门者一些帮助。

文章中使用的软件是 Sketch 49.3 和 After Effects CC 2017 中文版。

使用 Lottie 的工作流

1. 使用 Sketch 进行静态稿的设计；
2. 将设计稿导入到 Ae 中；
3. 在 Ae 中进行动画设计；
4. 在 Ae 中将动画导出为 json 文件；
5. 将 json 文件提供到开发者手上；

流程相关FAQ

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

Bodymovin

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

参照文档指引，顺带一说， Lottie 的文档和 github 页面写得非常好，指引极度清晰。 http://airbnb.io/lottie/#/after-effects https://github.com/airbnb/lottie-android

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

见文档说明。 http://airbnb.io/lottie/#/supported-features

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

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

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. 怎么预览我的文件是否正确？

• 使用 Bodymovin 中的生成预览
• lottiefiles.com

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

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

2024-11-09 补充：文章合并自以前写的一个 Gitbook 专题 Sketch 和 Lottie 的使用