原作者是站酷@： sunchwen，我对文章进行了重新排版，并将一些重点部分给标注出来而已
以下是正文：
总结这几个月内用 Bodymovin 做扁平动画的经验。
近几个月跟着导师做了 Lottie 资源规划，也用 Bodymovin 流程跟了项目，做了一些小动效。在这过程中，我不断发现问题并解决问题，学到了点知识，积累了点经验，借此机会来为这几个月自己的工作做个小总结。非常感谢导师大神（站酷@：Sherwin_leehao）的指导~~
内容大纲
- 几个关键词
- 优点和局限性
- 需求从何而来
- 动效案例分享（工作流程）
- 官网及相关链接
（文章初编辑于：2019年9月23日）
一、 几个关键词
首先，需要了解几个名词：
(1) Lottie：Airbnb Design 出的开源动画库。
在过去， 人们想为 Android、iOS 等移动端和客户端做动画是一个非常困难、冗长的过程。如今，Airbnb Design 公司为互联网时代的交互动画工作流程提供了一种解决方案：动画师可以通过一款开源的 AE 插件 —— Bodymovin ，来输出 json 文件，工程师和开发人员可通过修改其中的 Javascript 来实现动画的交互式设计。
Lottie 在 github 上有多种开源动画方案，如 lottie for web、lottie for ios 、lottie for android 等。
(2) Bodymovin：一款 AE 插件。
动画师可以从 aescripts 网站下载到免费开源的 Bodymovin ，官网有安装教程。设计师在AE里做好MG扁平动画后，用bodymovin导出json文件，但动画设计需要遵从一定的设计规范。
(3) Json：用 Bodymovin 导出的动画文件格式。
Json 也作 JavaScript Object Notation ，是一种数据交换语言。动画师用 Bodymovin 导出的 json 文件可提交研发人员，提取其中的动画属性，并进行相应的配置，将动画呈现在产品或页面中。
二、 优点和局限性
(1) Lottie 动画的优点：
-
区别于传统手绘动画工作流程中，繁琐的制作时间和巨大的修改难度，Lottie 动画可以容易地被设计师修改与调节。同时设计师也可更改动画速度，这是传动手绘动画难以做到的。
-
区别于 GIF 动画，Lottie 动画的文件体积比 GIF 小两倍多。Lottie 动画是矢量可缩放，以匹配更高的屏幕需求，而 GIF 不可矢量缩放。
-
区别于 PNG 序列，PNG 序列比 GIF 还更糟，体积大且不能矢量缩放。
-
适当地配置 Json 文件可为用户开发更多的交互体验，包括动画倍速播放，线条粗细及颜色的调整等。
-
Json 文件体积小，可减小产品安装包体积，用户下载资源更快。
-
Lottie 动画更方便动画设计师与研发人员进行配合，更好地开发产品动画交互性。
(2) Lottie 动画的局限性：
-
首先，Bodymovin 暂时不支持多种 AE 的特效和属性，使用时需遵守一定的设计规范。
-
Bodymovin 有时不太稳定，容易出 bug 。需要去 GitHub 寻找开源解决方案等。
关于 Bodymovin 能支持 AE 中的哪些功能，哪些平台支持，官网上都有很详细的表格说明，大家可以去官网的 Supported After Effect Features 部分查看。
三、 需求从何而来
-
越来越多的产品或营销页面，都需要以互动的形式呈现给观众。
-
随着互联网时代的发展，交互显得日趋重要。
-
传统动画流程，实现起来将会越麻烦和耗时，有时候就会引发设计师和工程师的矛盾。
-
人们努力寻找一种更加简单、高效、性能高的动画方案。
Lottie files 的官网首页有这么一句话：动画的未来和交互式设计。我们可以通过动画，有效地传达信息，与用户沟通，通过交互，更好地展现营销内容；同时，用户也可以通过互动，及时获取信息。动画的交互式设计可以更精彩。
四、 动效案例分享
Lottie 动画暂时适用于基于形状图形 Shape Layer 的扁平动画、MG 动画，因为大多数的 AE 特效及插件是不支持的。在这之前，我也在站酷发了用 Bodymovin 输出的小动效案例，这里用多邻国小鸟的动效做案例分享：
如何用 Bodymovin 做矢量动画呢？很简单，做就是了！
工作流程：
-
做动画：首先，我们需要遵循设计规范，在 AE 里做动画，此处的设计规范就是指 Bodymovin 所不支持的一些特效、表达式等，从关键帧、合成等方面做测试，不断输出，以达到体积更小，更完美的动画解决方案。
-
用 Bodymovin 渲染：在 AE->Windows->Extension 中打开 Bodymovin 插件，选中需要导出的合成，设定输出路径后，按 render 即可输出。每个合成的 setting 中可以选择输出设置，如：每几秒将该合成分裂成多个 json 文件等。
- 导出 Json 文件：通过 Bodymovin 导出的 json 文件，体积小，可编辑。JavaScript 中的对象名称对应 AE 中的各种属性：如 fr（帧率），ip（起始关键帧），op（结束关键帧），w（宽），h（高），layers（层），comp（合成名称） 等。
在动画互动这方面，Lottie 也以身作则，Bodymovin 的输出面板也加了可爱的小动效：
Lottie 的 app 可以读取 json 文件，也可以扫描 LottieFiles 官网上其他设计师发的动画文件二维码，读取并在手机上预览。真正做到交互动画的灵活性，可调节性，包括修改背景颜色，倍速播放，放大与缩小等。
Lottie editor 可以在线编辑 json 文件，实时更改图层颜色，可见性等。
五、 官网及相关链接
- Airbnb Design官网： airbnb.design/introducing…
- Bodymovin 的 GitHub： github.com/airbnb/lott…
- Lottie files 动画师社区： lottiefiles.com/
- Lottie editor 动画编辑器：editor.lottiefiles.com/
- Lottie 解说文档： airbnb.io/lottie/#/RE…
- Bodymovin 下载： aescripts.com/bodymovin/
- 渚薰大大的《H5 互动的正确打开方式》： ke.qq.com/course/2004…
感谢能看到底的小伙伴~
谢谢支持~
总结
刚开始接触 Lottie 的时候，导师给的任务就是要非常清楚地了解 Bodymovin 流程的优点和局限性，并从局限中寻找其他方法，以达到类似的设计效果。我阅读官网文档，点击每个衍生链接，了解 Lottie 的“前身今世”后，就从理论转化实践，做多个动效实验，包含渐变色、描边、角色动画、遮罩动画、三维、表达式等，做到具体情况具体分析，为表达式无法使用和纯色三维如何输出等问题提供了解决方案，也用 Lottie 流程参与了工作项目，非常感谢导师大神（站酷@：Sherwin_leehao）的指导！希望自己能持续在工作中 get 到了些新知识，保持学习能力，善于总结归纳，开拓思维。
感谢大家的阅读与支持~
欢迎评论留言~
有用的话点个赞哦~
▼▼▼▼▼▼▼
