Lottie Android 動畫製作與使用
還未了解Lottie的同志,請觀看我上篇文章: Lottie Android 初探
一、效果圖預覽

二、Adobe After Effects安裝
作為IT攻城獅,安裝軟體這方面還都是很強大的,我就不獻醜出安裝教程了,最後要記得安裝外掛bodymovin。
三、準備素材
我是在Android Material 材料風格圖示LOGO生成器生成的素材,開啟網頁,然後選擇“從下面挑選一個圖示”或滾動頁面到下方,隨便選擇一個圖示,我選擇的是下載圖示。進入配置下載介面,配置完成後點選下載。



下載後的內容如下:


四、AE開始製作
開啟AE,進入主介面,使用Ctrl+i快捷鍵匯入剛才下載的圖示:

使用Ctrl+N快捷鍵新建一個合成:

左鍵按住左上方的ic_launcher.png圖示拖動到下方操作框中來:

選擇下載的圖示,使其位置上移一段距離:

左擊“位置”左邊的圓框,確定圖示起點位置:


在右下方的時間軸操作皮膚中,使“當前時間指示器”移動到1s位置,表示動畫時長一秒:


然後拖動右上方合成皮膚中圖示下移一段距離:

在右下方時間軸皮膚中,拖動時間標尺上的線和其下方的線條,使他們移動到1s位置,然後點選主介面右側預覽皮膚的播放按鈕即可觀看效果;

然後依次選擇“視窗”-->“擴充套件”-->“bodymovin”,開啟bodymovin皮膚,選中Selected下的圓框,選擇匯出位置,然後點選Render進行渲染匯出json格式檔案。


至此,AE製作簡單的動畫並匯出json檔案完成。
五、AS新建一個Lottie專案
在app module的build.gradle中加入依賴:
dependencies {
compile 'com.airbnb.android:lottie:2.0.0-beta4'
}
複製程式碼
在main目錄下新建assets目錄,把匯出的data.json檔案放入其中。
然後在xml佈局中寫如下程式碼:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
複製程式碼
在Activity中新增:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("data.json");
animationView.loop(true);
animationView.playAnimation();
複製程式碼
其中data.json檔案是匯入到assets中的檔案。
然後執行到手機中,出現如下錯誤:
java.lang.IllegalStateException: You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder
複製程式碼
在載入image之前必須設定一個image資料夾,可以呼叫LottieComposition的setImagesFolder 方法或者 LottieDrawable的setImagesFolder方法。
其實,在2.0.0-beta4版本中已經不再提供使用這兩個方法,可以使用LottieAnimationView的setImageAssetsFolder方法和LottieDrawable的setImageAssetsFolder方法。
setImageAssetsFolder:

如果你用了Image的資源,您必須顯式地指定他們所在的assets資料夾,因為bodymovin匯出的檔案使用了裡面成分序列的以img_ 開頭的檔名。你放入到assets中的圖片不要重新命名影象本身。如果你的影象位於src /main/assets/ airbnb_loader / 資料夾下,你可以呼叫setImageAssetsFolder(“airbnb_loader /”);。
這樣的話,我們在assets下建立一個lsj資料夾,並把製作動畫的原圖修改名稱為img_0.png後放入lsj下。 之所以修改名稱為img_0.png,上面那段話已經解釋。或者也可以在data.json中尋找到:
"assets":[{"id":"image_0","w":192,"h":192,"u":"images/","p":"img_0.png"}],
複製程式碼
我們把Activity中程式碼修改為:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setImageAssetsFolder("lsj/");
animationView.setAnimation("data.json");
animationView.loop(true);
animationView.playAnimation();
複製程式碼
至此,製作動畫,匯出json檔案,展示於Android平臺完成。
六、Demo
https://fir.im/lottied
複製程式碼
七、參考資料
[bodymovin] http://jaqen.me/mdpub/
[Lottie Android 初探] http://blog.csdn.net/vitamio/article/details/70046998
[Android Material 材料風格圖示LOGO生成器] http://jaqen.me/mdpub/
複製程式碼