最近有一個(gè)動(dòng)畫神器庫火了，特別是在移動(dòng)開發(fā)的同學(xué)們?nèi)ψ永锩妫@個(gè)神器就是?Lottie

Lottie庫是一個(gè)可以用免費(fèi)插件Bodymovin ? ? ? 可以把AE動(dòng)畫直接導(dǎo)出為iOS，Android和React Native library的代碼供開發(fā)者使用。

Lottie的動(dòng)畫庫是出自Airbnb公司的一個(gè)開源項(xiàng)目，它能夠同時(shí)支持iOS,Android與ReactNative的開發(fā).

此消息一出,還在苦于探索自定義控件各種炫酷特效的我,興奮地就像發(fā)現(xiàn)的新大陸一般.

Lottie的出現(xiàn),將極大地解放Android/iOS工程師于無盡的編寫原生自定義動(dòng)畫的工作中.

當(dāng)我們的項(xiàng)目中用GIF實(shí)現(xiàn)一些復(fù)雜的視覺效果的時(shí)候,會(huì)遇到許多的問題.比如,GIF的文件過于龐大,并且對(duì)于不同分辨率設(shè)備的適配存在不便,并且Gif格式的色深問題是一個(gè)死穴.

有了Lottie，就不用要求移動(dòng)端的開發(fā)人員去編碼太長(zhǎng)的代碼了，直接讓美工或者UI設(shè)計(jì)師在AE軟件上設(shè)計(jì)的動(dòng)畫做好，然后通過Lottie生成代碼 給到客戶端的小伙伴就可以了。

具體實(shí)現(xiàn)步驟示意圖如下：

如上圖所示,通過安裝在AE上的一款名叫bodymovin的插件,能夠?qū)E中的動(dòng)畫工程文件轉(zhuǎn)換成通用的json格式描述文件,bodymovin插件本身是用于在網(wǎng)頁上呈現(xiàn)各種AE效果的一個(gè)開源庫,lottie做的事情就是實(shí)現(xiàn)了一個(gè)能夠在不同移動(dòng)端平臺(tái)上呈現(xiàn)AE動(dòng)畫的方式.

從而達(dá)到動(dòng)畫文件的一次繪制、一次轉(zhuǎn)換、隨處可用的效果.

當(dāng)然,就如Java?一次編譯,隨處運(yùn)行一樣,lottie本身這個(gè)動(dòng)畫播放庫并不是跨平臺(tái)的.

比如輕松實(shí)現(xiàn)如下的APP動(dòng)畫效果：

比如最近很多小伙伴也在學(xué)習(xí)hpye3一樣，現(xiàn)在又多了一個(gè)不錯(cuò)的學(xué)習(xí)神器。

一方面：大大節(jié)省了移動(dòng)開發(fā)設(shè)計(jì)同學(xué)的設(shè)計(jì)，提高了整個(gè)移動(dòng)開發(fā)的效率。

另外一方面：也可以讓客戶端的工程師們好好的膜拜一下我們吊炸天的 APP UI設(shè)計(jì)師吧！

移動(dòng)前端開發(fā)設(shè)計(jì)童鞋想要詳細(xì)了解Lottie庫使用教程：可以點(diǎn)擊下面的鏈接

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