自开始工作后，我就养成了一个习惯，那就是每天闲来无事去 Github 中浏览一些比较热门的开源项目，就在最近我发现了一个比较niubility的开源动画库项目 ----Lottie。
正式开始之前先简单的介绍一下， Lottie是 Airbnb 发布的一个面向 iOS、Android 和 React Native 的开源动画库。Lottie 的使用流程很简单，就是在AE中设计完成你的动画后，通过bodymoving插件导出一份记录动画信息的JSON文件，然后开发人员使用 Lottie 的Android，iOS，React Native apps开源动画库读取这份JSON文件进行解析和渲染。
动画对于我们做客户端开发的人来说并不陌生，动画对于提升app的用户体验绝对是不容置疑的，如果你能在客户端用代码实现复杂的动画效果，那么你在找工作的时候绝对很受欢迎，但是不巧的是Airbnb开源的这个动画库，可能会让你失去这种优势。
为什么说他niubility呢！先来看几张动图吧~
效果是不是很赞，相比于我们用代码去实现这些复杂的动画，简直就是前端程序员的福音。
那如何去看待 Airbnb 的 lottie 呢！
我搜罗了来自知乎的一些答案：
优点
从代码上看，Android 端的实现是基于 Drawable、iOS 端是基于 Layer —— 最终都是对 canvas 的操作，中间除去解析 json 外，基本无耗费性能的行为。（官方文档有提到，masks 和 mattes 动画较为耗费性能，原因是需要额外的 Bitmap 辅助，这点需注意）
而存储上，动画由 json 文件描述，占用空间不多。
也是因为动画由 json 文件描述，所以它的第三个优点是动画的更新及其方便。在之前，假如我们要完成动画动态更新需求，要么使用上述所说的 GIF、帧动画等方案，要么就自定义动画描述文件或用笨重的xml来完成动画。那么现在用 json 文件，简直再方便不过了。
计即所见。 设计师AE导出Json文件，Lotti 解析Json文件后调Core Animation的API绘制渲染。复杂的帧动画如此实现还原度更好，开发成本更低。
跨平台: 支持iOS、Android、React Native。
性能：Lotti对于从AE导出的Json文件，用Core Animation做矢量动画, 性能较佳。Lotti 对解析后的数据模型有内存缓存。
灵活高效的API: 控制动画进度、播放、暂停。
支持动画属性多：比起脸书的Keyframes，Lotti支持了更多AE动画属性，比如Mask, Trim Paths,Stroke (shape layer)等。
仍然存在的问题
Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出；
Lottie 对 json 文件的支持待完善，目前有部分能成功导出成 json 文件的效果在移动端上无法很好的展现；
目前不支持文字，所有文字必须转成矢量图才能正常展现动画；
动画无法被编辑，即移动端无法更改远端下载到本地的动画；
文档需要跟进。。现在的 json 文件内容看的好蛋疼。。根本没法开开心心提PR；
如何使用Lottie
Lottie支持iOS 8及以上版本。 Lottie动画可以通过JSON 文件或从URL地址加载。 只需要将AE导出的JSON以及所需要的图片资源添加到工程中。
使用它的最简单的方法是使用LOTAnimationView：
如果你在多个bundle中穿插工作：
以URL的方式加载：
最后，Lottie库的开源地址在这里：
Android: https://github.com/airbnb/lottie-android
iOS: https://github.com/airbnb/lottie-ios
ReactNative: https://github.com/airbnb/lottie-react-native
感兴趣的可以试试哦！
好了。祝大家生活愉快。多多收获友谊和爱情。如果想获取更多的讯息，请扫描下方二维码关注我的微信公众号：
