超简单~ 用Lottie配合AE完美落地动效设计

我猜到很多老司机已经知道Lottie并会使用他了。但这并不重要，因为我才用不长时间，就谈谈我使用的体验吧。（这是一篇拖了半年的总结。）

关于Lottie和Bodymovin

Lottie是爱彼迎（Airbnb）也就是搞民宿的那个公司开发团队做的一个文件库，可以将AE做好的动画效果提供到IOS，Andriod或者Web等平台。

bodymovin是装在AE里的一个插件，把AE做好的合成动画通过这个插件输出JSON文件，然后由Lottie解读JSON文件到动画数据后给到开发，最终做到零代码高效的实现动画的这个一过程。

Lottie多平台输出实现过程

可用到的场景

• 1. 启动(splash)动画：典型场景是APP logo动画的播放

• 2. 上下拉刷新动画：利用 Lottie 可以做的更加简单酷炫了

• 3. 加载(loading)动画：典型场景是网络请求的loading动画

• 4. 提示(tips)动画：典型场景是空白页的提示

• 5. 按钮(button)动画：典型场景如switch按钮、编辑按钮、播放按钮等按钮的切换过渡动画

• 6. 礼物(gift)动画：典型场景是直播类APP的高级动画播放

• 7. 视图转场动画

• .......

  
  

第一步

安装AE
--------
安装Bodymovin插件，此插件是安装在AE上的

地址https://github.com/bigxixi/bodymovin_cn

安装bodymovin之前需要这个安装器，因为bodymovin需要他才能装到AE上
https://aescripts.com/learn/zxp-installer/的zxp安装器

直接将zxp文件拖拽进安装器，或者按快捷键cmd + o然后，选择zxp文件进行安装。如果之前安装过bodymovin，会覆盖掉原来的版本

最后把lottie源码给开发看，他们会懂得
→https://github.com/airbnb/lottie-web

第二步

打开AE做动画，不会AE的看教程吧[AE教程]
**PS**：最近阿里出了个犸良动画平台，这个平台有很大的意义在于让一点没有动效基础的同学基于平台的动效库以及素材库快速生成一个动画创意。可用在banner、icon、加载等位置。当然，犸良也是基于lottie去实现到各个平台中。[犸良sage官网]继续附上链接有兴趣的同学可以去研究，个人觉得类似第三方平台快速实现H5的那种方式，个人自由发挥的程度可能有所限制。

插播一个sketch做好图后无损导入到AE的插件 `AEUX`插件 

具体使用方法详见超链接，不过这插件好像不支持高版本，超过54的版本点击导出就没有反应了。

个人做了一个很简单的loading，目前实现在「天风高财生」APP中，开发对于实现loading的便捷程度表示还不错。[天风高财生loading]

第三步

做好动效后，顶部导航栏中寻找
窗口 》扩展 》boadmovin

这个窗口中可以渲染合成动画，也可以预览，预览就是把JSON文件传上去就可以，
做好动画后选择要渲染的合成，最后得到JSON文件，给到开发，并把使用的一些规则（例如展示的最短、最长时间，展示的场景，展示的大小范围，全局还是局部加载等等）告诉开发，最终经过一番调试就可以测试上线了。

特别备注

Lottie支持的AE属性[Lottie Docs]
…..更多问题以及解决方法等待大家一起了解！！！

开发如何接入Lottie

1. [Lottie Docs] Lottie用户手册

2. [GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations]  IOS平台用户项目手册

3. [GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native]  Andriod平台用户项目手册

各平台预览效果方法

1. 网页预览地址 [Preview & Test Bodymovin Lottie Animations on Web, iOS and Android]

2. IOS：应用商店搜索lottiefile

3. 安卓：应用宝搜索lottie