而 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)鍵字獲取