移动前端开发设计童鞋的福利神器:Lottie库

最近有一个动画神器库火了,特别是在移动开发的同学们圈子里面,这个神器就是 Lottie

Lottie库是一个可以用免费插件Bodymovin       可以把AE动画直接导出为iOS,Android和React Native library的代码供开发者使用。

lottie-动画神器

 

Lottie的动画库是出自Airbnb公司的一个开源项目,它能够同时支持iOS,Android与ReactNative的开发.

此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就像发现的新大陆一般.

Lottie的出现,将极大地解放Android/iOS工程师于无尽的编写原生自定义动画的工作中.

当我们的项目中用GIF实现一些复杂的视觉效果的时候,会遇到许多的问题.比如,GIF的文件过于庞大,并且对于不同分辨率设备的适配存在不便,并且Gif格式的色深问题是一个死穴.

有了Lottie,就不用要求移动端的开发人员去编码太长的代码了,直接让美工或者UI设计师在AE软件上设计的动画做好,然后通过Lottie生成代码 给到客户端的小伙伴就可以了。

具体实现步骤示意图如下:

lottie_sum

如上图所示,通过安装在AE上的一款名叫bodymovin的插件,能够将AE中的动画工程文件转换成通用的json格式描述文件,bodymovin插件本身是用于在网页上呈现各种AE效果的一个开源库,lottie做的事情就是实现了一个能够在不同移动端平台上呈现AE动画的方式.

从而达到动画文件的一次绘制、一次转换、随处可用的效果.

当然,就如Java 一次编译,随处运行一样,lottie本身这个动画播放库并不是跨平台的.

 

 

比如轻松实现如下的APP动画效果:

 

比如最近很多小伙伴也在学习hpye3一样,现在又多了一个不错的学习神器。

 

一方面:大大节省了移动开发设计同学的设计,提高了整个移动开发的效率。

另外一方面:也可以让客户端的工程师们好好的膜拜一下我们吊炸天的 APP UI设计师吧!

 

移动前端开发设计童鞋想要详细了解Lottie库使用教程:可以点击下面的链接

http://www.cnblogs.com/lennon-wechat/p/lottie.html

每天更新,
全站高品质素材免费下载!