Lottie: 让动画实现更简单

 

自开始工作后，我就养成了一个习惯，那就是每天闲来无事去 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

 

感兴趣的可以试试哦！

 

 

好了。祝大家生活愉快。多多收获友谊和爱情。如果想获取更多的讯息，请扫描下方二维码关注我的微信公众号：