Lottie安卓開源動畫庫使用

碉堡的Lottie

Airbnb最近開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與ReactNative的開發.此消息一出,還在苦於探索自定義控件各種炫酷特效的我,興奮地就像發現的新大陸一般.可以說,Lottie的出現,將極大地解放Android/iOS工程師於無盡的編寫原生自定義動畫的工作中.
當我們的項目中用GIF實現一些複雜的視覺效果的時候,會遇到許多的問題.比如,GIF的文件過於龐大,並且對於不同分辨率設備的適配存在不便,並且Gif格式的色深問題是一個死穴.

比如下面這幾個動畫效果:

設計這些動畫效果顯然不是寫代碼的程序員應該負責的事情.那有沒有什麼辦法,能讓美工在AE軟件上設計的動畫直接用於移動端呢?
有的,那就是使用Lottie.

如上圖所示,通過安裝在AE上的一款名叫bodymovin的插件,能夠將AE中的動畫工程文件轉換成通用的json格式描述文件,bodymovin插件本身是用於在網頁上呈現各種AE效果的一個開源庫,lottie做的事情就是實現了一個能夠在不同移動端平臺上呈現AE動畫的方式.從而達到動畫文件的一次繪製、一次轉換、隨處可用的效果.
當然,就如Java一次編譯,隨處運行一樣,lottie本身這個動畫播放庫並不是跨平臺的.

上手使用

說了那麼多,下面來詳細說說怎樣使用這個碉堡的庫.首先聲明,以下涉及到的軟件可能包含破解版,如果你資金充裕,請支持正版.
以下使用方式與軟件在2017年2月6日都有效.

安裝Adobe After Effects CC 2017

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 位
環境下能夠正常安裝並使用.安裝過程中按照內置說明安裝即可.

安裝bodymovin插件

想了解此插件可以參看該插件的GitHub頁面.

下載bodymovin.zxp插件包

此文件位於工程中的/build/extension/目錄下,如果外網速度慢可以從這裏可以下載該插件的最新版本.

安裝插件

項目說明中給出了爲AE安裝插件的三種方式:

• 通過第三方軟件ZXP Installer安裝;
• 手動安裝;
• 使用Adobe官方插件安裝器安裝.

這三種筆者都試過,最後得出只有第二種(也是看起來最繁瑣的)有效.這裏詳細說明一下第二種方法:

• • 先關閉AE;
  • 用WinRAR或類似軟件打開bodymovin.zxp文件,並將解壓後的文件夾直接複製到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
    或者是C:<username>\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這個實例工程,稍作修改:

導出json數據

如果上文的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庫播放動畫

  終於說到主角了,然而關於它的使用方式卻是相對簡單的.Lottie的引入與使用就如其他庫一樣,這裏以Android平臺的使用爲例.

  在項目的build.gradle文件中加入:

Lottie支持Jellybean (API 16)及以上的系統,最簡單的使用方式是直接在佈局文件中添加:

或者,你也可以通過代碼的方式添加.比如從位於app/src/main/assets路徑下的json文件中導入動畫數據:

這方法將在後臺線程異步加載數據文件,並在加載完成後開始渲染顯示動畫.
如果你想複用加載的動畫,例如下一個ListView中每一項都需要顯示這個動畫,那麼你可以這麼做:

你還可以通過API控制動畫,並且設置一些監聽:

在使用遮罩的情況下,LottieAnimationView 使用 LottieDrawable來渲染動畫.如果需要的話,你可以直接使用drawable形式:

如果你需要頻發使用某一個動畫,可以使用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/