Lottie Android 動畫製做與使用

Lottie Android 動畫製做與使用

還未了解Lottie的同志，請觀看我上篇文章： Lottie Android 初探

1、效果圖預覽

2、Adobe After Effects安裝

做爲IT攻城獅，安裝軟件這方面還都是很強大的，我就不獻醜出安裝教程了，最後要記得安裝插件bodymovin。

3、準備素材

我是在Android Material 材料風格圖標LOGO生成器生成的素材，打開網頁，而後選擇「從下面挑選一個圖標」或滾動頁面到下方，隨便選擇一個圖標，我選擇的是下載圖標。進入配置下載界面，配置完成後點擊下載。

下載後的內容以下：

4、AE開始製做

打開AE，進入主界面，使用Ctrl+i快捷鍵導入剛纔下載的圖標：

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

左鍵按住左上方的ic_launcher.png圖標拖動到下方操做框中來：

選擇下載的圖標，使其位置上移一段距離：

左擊「位置」左邊的圓框，肯定圖標起點位置：

在右下方的時間軸操做面板中，使「當前時間指示器」移動到1s位置，表示動畫時長一秒：

而後拖動右上方合成面板中圖標下移一段距離：

在右下方時間軸面板中，拖動時間標尺上的線和其下方的線條，使他們移動到1s位置，而後點擊主界面右側預覽面板的播放按鈕便可觀看效果;

而後依次選擇「窗口」-->「擴展」-->「bodymovin」，打開bodymovin面板，選中Selected下的圓框，選擇導出位置，而後點擊Render進行渲染導出json格式文件。

至此，AE製做簡單的動畫並導出json文件完成。

5、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平臺完成。

6、Demo

https://fir.im/lottied
複製代碼

7、參考資料

[bodymovin] http://jaqen.me/mdpub/
[Lottie Android 初探] http://blog.csdn.net/vitamio/article/details/70046998
[Android Material 材料風格圖標LOGO生成器] http://jaqen.me/mdpub/
複製代碼

原創文章，轉載請註明出處。