Lottie 動畫

而 Airbnb 開源的這個項目完美的解決以上難題,我們來看下整個流程是什么樣的。

假設(shè)我們要做一個引導(dǎo)頁面的歡迎動畫,這個一般設(shè)計師會用 Adobe 旗下的 After Effects (簡稱 AE)來做個動畫出來,設(shè)計師用 AE 做個動畫比工程師用代碼去實現(xiàn)一個動畫要快的多的多,調(diào)整起來也很方便,之后 AE 上有一款插件叫做Bodymovin,這個插件也比較屌,可以直接根據(jù) AE 上的動畫文件導(dǎo)出 json 文件,這個 json 文件描述了該動畫的一些關(guān)鍵點的坐標(biāo)以及運動軌跡,之后我們在項目中引用 Lottie 開源庫,在布局文件中簡單的加上這么一句就完美的實現(xiàn)了。

或者代碼中這樣使用:

LottieAnimationViewanimationView=findViewById(R.id.animation_view);animationView.setAnimation("hello-world.json");animationView.loop(true);

值得一提的是,我們的 hello-world.json 文件只需要放在 app/src/main/assets 目錄下就 ok 了。

當(dāng)然,還有更多的用法,比如給動畫添加事件,比如描述動畫的 json 文件可以遠程更新下載到本地,這樣就可以不動聲色的定期更新你的動畫了。

有了這個庫,我們可以充分發(fā)揮我們的想象力,很簡單方便的就實現(xiàn)了一套很酷炫的動畫,最重要的是,這個庫是跨平臺的,支持 Android、iOS 以及 ReactNative,共用一套 json 動畫描述文件。

其實 Facebook 前段時間開源了一個類似的庫叫做Keyframes,也是跨平臺的,但是 Lottie 比 Keyframes 支持的特性更多,而且據(jù) Airbnb 官方博客介紹,以后對讓這個庫支持更多的特性與功能,不得不說,真乃良心!

最后,這個庫的開源地址在這里:

Android:https://github.com/airbnb/lottie-android

iOS:https://github.com/airbnb/lottie-ios

ReactNative:https://github.com/airbnb/lottie-react-native

最最后,Airbnb 還提供了一個 sample apk,考慮到部分人在 Google Play 上下載 apk 有些困難,我也貼心的把 sample apk 下載下來了,公眾號 AndroidDeveloper 后臺回復(fù)「lottie」關(guān)鍵字獲取

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,119評論 25 709
  • 驚艷的Lottie 前段時間airbnb開源的動畫庫Lottie得到了不錯的反響,旨在解決Android、IOS、...
    andChen閱讀 5,393評論 0 23
  • 為了提升用戶體驗, 在界面中加入一個設(shè)計良好的界面動畫成為app設(shè)計的潮流. 之前聽有人說過專業(yè)的界面動畫是要有設(shè)...
    火之玉閱讀 8,815評論 0 15
  • Lottie是Airbnb最近開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與React...
    奎章閱讀 2,113評論 2 0
  • 不知你有沒有過這樣的經(jīng)驗:有一些書,在年紀(jì)輕的時候讀,感覺不過爾爾,年紀(jì)稍長卻發(fā)現(xiàn)其味深長。有一些話,過去聽了就像...
    魚鮮支閱讀 767評論 0 3

友情鏈接更多精彩內(nèi)容