Airbnb最近開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與ReactNative的開發.此消息一出,還在苦于探索自定義控件各種炫酷特效的我,興奮地就像發現的新大陸一般.可以說,Lottie的出現,將極大地解放Android/iOS工程師于無盡的編寫原生自定義動畫的工作中.
當我們的項目中用GIF實現一些復雜的視覺效果的時候,會遇到許多的問題.比如,GIF的文件過于龐大,并且對于不同分辨率設備的適配存在不便,并且Gif格式的色深問題是一個死穴.
比如下面這幾個動畫效果:
還有這些:
怎么樣？這些可不是簡單的移動、縮放、旋轉就搞得定的，可能有些人思考了之后大概有以下實現思路：
使用 Gif，這種方式當然可行，但是使用 Gif 占用空間較大，而且需要為各種屏幕尺寸、分辨率做適配，因為 Android 沒有提供原生 Gif 的 api 支持，所以這種方案還會遇到兼容性問題；
使用幀動畫，這種方式還不如使用 Gif，一般來說使用幀動畫占用空間比 Gif 還要大的多，而且一樣要做多屏幕分辨率的適配，不過不會遇到兼容性問題；
使用視頻，這種方式當然可以，但是一般來說宣傳片才用的上視頻，一般的動畫遠不需要用視頻才能實現的，未免有些大材小用了，而且占用空間依然很大。
就沒有更好的實現方式了么？
當然有，Android 5.x 之后提供了對 SVG 的支持，通過 VectorDrawable、AnimatedVectorDrawable 的結合可以實現一些稍微復雜的動畫，兼容性是一個問題，不過整個實現流程非常麻煩，每次全新實現一個動畫都得重頭來過，最最關鍵的是，如果一個公司下的 App，iOS 也要實現一套一樣的動畫，資源的占用就顯得過大了。
而 Airbnb 開源的這個項目完美的解決以上難題，我們來看下整個流程是什么樣的。
假設我們要做一個引導頁面的歡迎動畫，這個一般設計師會用 Adobe 旗下的 After Effects （簡稱 AE）來做個動畫出來，設計師用 AE 做個動畫比工程師用代碼去實現一個動畫要快的多的多，調整起來也很方便，之后 AE 上有一款插件叫做 Bodymovin，這個插件也比較屌，可以直接根據 AE 上的動畫文件導出 json 文件，這個 json 文件描述了該動畫的一些關鍵點的坐標以及運動軌跡，之后我們在項目中引用 Lottie 開源庫，在布局文件中簡單的加上這么幾句引用就完美的實現了。
如上圖所示,通過安裝在AE上的一款名叫bodymovin的插件,能夠將AE中的動畫工程文件轉換成通用的json格式描述文件,bodymovin插件本身是用于在網頁上呈現各種AE效果的一個開源庫,lottie做的事情就是實現了一個能夠在不同移動端平臺上呈現AE動畫的方式.從而達到動畫文件的一次繪制、一次轉換、隨處可用的效果.當然,就如java一次編譯,隨處運行一樣,lottie本身這個動畫播放庫并不是跨平臺的.
值得一提的是，我們的 hello-world.json 文件只需要放在 app/src/main/assets 目錄下就 ok 了。
當然，還有更多的用法，比如給動畫添加事件，比如描述動畫的 json 文件可以遠程更新下載到本地，這樣就可以不動聲色的定期更新你的動畫了。
有了這個庫，我們可以充分發揮我們的想象力，很簡單方便的就實現了一套很酷炫的動畫，最重要的是，這個庫是跨平臺的，支持 Android、iOS 以及 ReactNative，共用一套 json 動畫描述文件。
其實 Facebook 前段時間開源了一個類似的庫叫做 Keyframes，也是跨平臺的，但是 Littie 比 Keyframes 支持的特性更多，而且據 Airbnb 官方博客介紹，以后對讓這個庫支持更多的特性與功能，不得不說，真乃良心！
說了那么多,下面來詳細說說怎樣使用這個碉堡的庫.首先聲明,以下涉及到的軟件可能包含破解版,如果你資金充裕,請支持正版. 以下使用方式與軟件在2017年2月6日都有效.
Adobe是個好公司,做了很多牛逼的軟件,但是無一例外都被國人破解了.本例使用的是最新版的AE CC 2017.
可用下載地址 http://www.dayanzai.me/after-effects-cc-2014.html
CDN 分流地址 http://trojx-me.oss-cn-hangzhou.aliyuncs.com/AE%202017%5BWwW.DaYanZai.Me%5D.rar
感謝作者提供軟件.注意此版本只適用于WIN 64位系統,筆者在 Win7 64 位 環境下能夠正常安裝并使用.安裝過程中按照內置說明安裝即可.
想了解此插件可以參看該插件的GitHub頁面下載bodymovin.zxp插件包
此文件位于工程中的/build/extension/目錄下,如果外網速度慢可以從這里可以下載該插件的最新版本.
項目說明中給出了為AE安裝插件的三種方式:
1.通過第三方軟件ZXP Installer安裝;2.手動安裝;3.使用Adobe官方插件安裝器安裝.使用Adobe官方插件安裝器安裝
這三種筆者都試過,最后得出只有第二種(也是看起來最繁瑣的)有效.這里詳細說明一下第二種方法:
先關閉AE;用WinRAR或類似軟件打開bodymovin.zxp文件,并將解壓后的文件夾直接復制到C:/PRogram Files (x86)/Common Files/Adobe/CEP/extensions或者是C:/AppData/Roaming/Adobe/CEP/extensions下,對于MAC機器路徑是/Library/application/ Support/Adobe/CEP/extensions/bodymovin
修改注冊表.對于Windows,打開注冊表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路徑下添加一個名為PlayerDebugMode的KEY,并賦值為1;對于MAC,打開文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,鍵為PlayerDebugMode,值為1.設置AE 無論以何種方式安裝bodymovin插件,都需要在AE的編輯->首選項->常規中勾選允許腳本寫入文件和訪問網絡(默認不開啟) 
由于筆者目前不會使用AE(廢話,軟件都是剛裝的),這里我們打開一個現有的工程文件. 從這里可以找到一些Lottie中演示過的動畫的AE源文件,下載到本地后在AE中打開即可.這里我們選用EmptyState.aep這個實例工程,稍作修改:
如果上文的bodymovin插件安裝成功的話,在AE中的窗口->拓展中是能夠找到它的.
在插件窗口中選擇json數據文件導出的路徑,點擊Render按鈕即可渲染工程并導出.
原始工程動畫效果:
原始工程導出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json
修改后工程動畫效果:
修改后工程導出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_edit.json
終于說到主角了,然而關于它的使用方式卻是相對簡單的.Lottie的引入與使用就如其他庫一樣,這里以Android平臺的使用為例.
在項目的build.gradle文件中加入:
dependencies { compile 'com.airbnb.android:lottie:1.0.1' ... }1234
1234Lottie支持Jellybean (API 16)及以上的系統,最簡單的使用方式是直接在布局文件中添加:
<com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="hello-world.json" app:lottie_loop="true" app:lottie_autoPlay="true" />12345671234567或者,你也可以通過代碼的方式添加.比如從位于app/src/main/assets路徑下的json文件中導入動畫數據:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);animationView.setAnimation("hello-world.json");animationView.loop(true);123123這方法將在后臺線程異步加載數據文件,并在加載完成后開始渲染顯示動畫. 如果你想復用加載的動畫,例如下一個ListView中每一項都需要顯示這個動畫,那么你可以這么做:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view); ... LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> { animationView.setComposition(composition); animationView.playAnimation(); });123456123456你還可以通過API控制動畫,并且設置一些監聽:
animationView.addAnimatorUpdateListener((animation) -> { // Do something. }); animationView.playAnimation(); ... if (animationView.isAnimating()) { // Do something. } ... animationView.setProgress(0.5f); ... // 自定義速度與時長 ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f) .setDuration(500); animator.addUpdateListener(animation -> { animationView.setProgress(animation.getAnimatedValue()); }); animator.start(); ... animationView.cancelAnimation();12345678910111213141516171819201234567891011121314151617181920在使用遮罩的情況下,LottieAnimationView 使用 LottieDrawable來渲染動畫.如果需要的話,你可以直接使用drawable形式:
LottieDrawable drawable = new LottieDrawable(); LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -> { drawable.setComposition(composition); });12341234如果你需要頻發使用某一個動畫,可以使用LottieAnimationView內置的一個緩存策略: LottieAnimationView.setAnimation(String, CacheStrategy) 其中CacheStrategy的值可以是Strong,Weak或者None,它們用來決定LottieAnimationView對已經加載并轉換好的動畫持有怎樣形式的引用(強引用/弱引用).
lottie在iOS中的使用介紹可以參看陳董DON的文章
分享一個能夠在瀏覽器中預覽json動畫數據的網站
Lottie官方給的Android Demo安裝包使用它能夠查看示例動畫,并能夠載入并播放來自本地存儲或網絡的json動畫數據.
好了,先寫到這里,我去研究AE去了~后續應該會補上一個使用Lottie的Android Demo. 原文地址 http://www.trojx.me/2017/02/06/android-lottie-library/
本文主要轉自簡書作者:Trojx 參考文章:這個項目碉堡了
新聞熱點
疑難解答
