bodymovin如何做动效
总结这几个月内用bodymovin做扁平动画的经验。
近几个月跟着导师做了Lottie资源规划，也用bodymovin流程跟了项目，做了一些小动效。在这过程中，我不断发现问题并解决问题，学到了点知识，积累了点经验，借此机会来为这几个月自己的工作做个小总结。非常感谢导师大神（站酷@：Sherwin_leehao）的指导~~
内容大纲：
1. 几个关键词
2. 优点和局限性
3. 需求从何而来
4. 动效案例分享（工作流程）
5. 官网及相关链接
（文章初编辑于：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做矢量动画呢？很简单，做就是了！
工作流程：
1. 做动画：首先，我们需要遵循设计规范，在AE里做动画，此处的设计规范就是指bodymovin所不支持的一些特效，表达式等，从关键帧，合成等方面做测试，不断输出，以达到体积更小，更完美的动画解决方案。
2. 用Bodymovin 渲染：在AE--Windows--extension中打开bodymovin插件，选中需要导出的合成，设定输出路径后，按render即可输出。每个合成的setting中可以选择输出设置，如：每几秒将该合成分裂成多个json文件等。
3. 导出Json文件：通过bodymovin导出的json文件，体积小，可编辑。JavaScript中的对象名称对应AE中的各种属性：如“fr（帧率）”，“ip（起始关键帧）”，“op（结束关键帧）”，“w（宽）”，“h（高）”，“layers（层）”，“comp（合成名称）”等。
在动画互动这方面，Lottie也以身作则，bodymovin的输出面板也加了可爱的小动效：
Lottie的app可以读取json文件，也可以扫描Lottiefiles官网上其他设计师发的动画文件二维码，读取并在手机上预览。真正做到交互动画的灵活性，可调节性，包括修改背景颜色，倍速播放，放大与缩小等。
Lottie editor可以在线编辑json文件，实时更改图层颜色，可见性等。
五、 官网及相关链接
· Airbnb Design官网： https://airbnb.design/introducing-lottie/
· Bodymovin的GitHub： https://github.com/airbnb/lottie-web
· Lottie files 动画师社区： https://lottiefiles.com/
· Lottie editor动画编辑器：https://editor.lottiefiles.com/
· Lottie解说文档： http://airbnb.io/lottie/#/README
· Bodymovin下载： https://aescripts.com/bodymovin/
· 渚薰大大的《H5互动的正确打开方式》： https://ke.qq.com/course/200459?taid=1172092280311563
感谢能看到底的小伙伴~
谢谢支持~
总结：
刚开始接触Lottie的时候，导师给的任务就是要非常清楚地了解bodymovin流程的优点和局限性，并从局限中寻找其他方法，以达到类似的设计效果。我阅读官网文档，点击每个衍生链接，了解Lottie的“前身今世”后，就从理论转化实践，做多个动效实验，包含渐变色、描边、角色动画、遮罩动画、三维、表达式等，做到具体情况具体分析，为表达式无法使用和纯色三维如何输出等问题提供了解决方案，也用Lottie流程参与了工作项目，非常感谢导师大神（站酷@：Sherwin_leehao）的指导！希望自己能持续在工作中get到了些新知识，保持学习能力，善于总结归纳，开拓思维。
感谢大家的阅读与支持~
欢迎评论留言~
有用的话点个赞哦~
▼▼▼▼▼▼▼
