Use LottieAnimationView in Android

想要美美的動畫？

用 adobe的系列產品 就可以做出很多很棒的動畫。
AI + AE 再藉由 bodymovin 轉檔產出 json 格式後，
就可以藉由 LottieAnimationView 來顯示。
在這邊關於轉出的檔案會有因爲原先實作的工具而產生差異，
有時候會因此而無法順利的顯示，
此時可以參考 bodymovin的格式介紹。
直接修改出問題的部分。

怎麼顯示在Android裡？

在xml就這樣直接用 (將要用到的 json file 放到 assets 這個資料夾下)

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/..."
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:lottie_rawRes="@raw/hello_world"     
        <!--or-->
        app:lottie_fileName="hello_world.json"
        <!--Loop indefinitely-->
        app:lottie_loop="true"
        <!--Start playing as soon as the animation is loaded-->
        app:lottie_autoPlay="true"/>

也可以在程式碼裡控制

  lottieAnimView.setAnimation(FileName+".json");
  lottieAnimView.playAnimation();

轉出來的圖顯示不如預期？

我自己遇到的是用 bodymovin 轉檔出來後，
不知道為什麼路徑的邊 stroke 的寬度輸出成10。
顏色也沒有被順利輸出。
這時候就可以採取上方提到的找出奇怪的部分直接改值。
主要就是從 nm 的名稱找到特定層設定的部分，
再去看你懷疑的部分（ color / width 之類的 ）會比較容易找到問題！
像這樣確認完在要改的屬性元件
"nm":"Fill 1" -> "c":{"a":0,"k":[1,1,1,1] 改這個顏色 現在是白色

再分享一個，這邊我在找的時候是用 Android Studio plugin Json Parser 來看輸出原文，
再用 finder 的功能，直接找關鍵字去調整值。

怎麼動態調整畫面？

如果你有需要針對不同主題換色，或是用其他動態變化，可以看看Lottie使用動態變換的介紹

簡單的換色 （要注意這是新版的 api 用法 Lottie 2.5.0+）

tmp.addValueCallback(
    new KeyPath("Shape Layer","Rectangle","Fill"),
                 LottieProperty.COLOR_FILTER,
                 new LottieValueCallback<>(
                     new SimpleColorFilter(

                         ContextCompat.getColor(context, R.color.red)))); 

關於 KeyPath 是指要修改的屬性在 json 檔案的解析路徑。
就上面可以知道原檔是在 Shape Layer 這個圖層裡的 Rectangle 方形這個物件，然後我要調整的是這個物件的顏色，所以針對屬性填滿 Fill 用 ColorFilter 來達成我要的效果。
關於不同屬性有他自己獨有支援的部分。這個地方可以仔細對照上面 Lottie使用動態變換的介紹 的 Animatable Properties 部分。這個功能確實強大，只要是有支援的屬性都可以針對當下的變動再調整，可以說這個擴充使的原本的動畫又更有調整彈性了～
* 順帶一提我使用的是支援 androidx 的 Lottie 2.8.0

沒有動畫原檔？

下面這篇文章可以稍微窺探設計師怎麼做動畫：
AE 爆炸動畫製作的介紹
沒有人做動畫也可以自己試試，或是上 LottieFiles 直接找適用的動畫。

希望大家都可以用上美美的動畫啦～～