iOS Lottie集成与使用

Life

Lottie介绍

“Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!” - 自官网：https://github.com/airbnb/lottie-ios

大致意思是：Lottie是一个可以解析使用【bodymovin】插件从 Adobe After Effects 中导出的格式为 json 的文件，并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。

这个库由 Airbnb 开发并在2017年2月份左右开源的。

看一下官方实现的一部分效果：

 

Community 2_3.gif

 

Examples1.gif

 

Examples2.gif

 

Examples3.gif

 

Examples4.gif

 

是不是很cool！看到此库我是非常喜欢开心的！为什么呢？

先来脑补一些场景：
场景一：在开发 app 过程中，需要在 app 中实现设计师提供的效果动画，都是通过代码来实现，针对复杂的动画，开发同学更是会花费很长时间去实现，如果是处女座的设计师，还会坐在开发同学旁边“折磨”开发同学一起调细节，做过的同学一定深有体会。

场景二：还有一些情况，因为实现动画的开发成本比较高，比如需要1～2天去实现一个动画效果，但是因为版本周期比较紧，会在无奈中砍掉或者简化动画，那么原本想提升用户体验的，却打了折扣。

总的来说，动画要实现，需要设计师通过设计出来，然后开发同学再通过代码实现。开发完成后，再和设计同学一起对代码实现的效果进行微调，达到满意效果。
那么对一些炫酷的、体验非常好的动画设计，开发的成本很高，虽然现在一些第三方的开源动画可以参考，但是要做的有自己的特色，还是需要花时间去理解分析、实现、调试。对一些迭代周期短的app来说，花那么多时间去做一个动画，基本会被kill，设计同学一定很无奈和郁闷。

但是现在不同了！！！

Airbnb 开源的这个库，应该可以让设计师和开发同学喜笑颜开了。通过bodymovin 这个AE的插件，可以将AE设计好的动画导出为json格式的文件。交给开发同学，开发同学通过集成Lottie库，就可以读取设计同学给到的json文件，在程序中通过几行代码就可以实现原本要花费1天甚至更久的时间来实现的动画啦。是不是很cool？大大降低了开发同学的开发成本，而在客户端上展示的动画效果是和AE中的一样的，不需要花额外时间和开发一起微调了，这样一来，开发同学就把时间和精力放在动画以外的事情上就好了。boss开心了、设计同学开心了、开发同学也开心了、用户使用的也开心了，皆大欢喜是不是