2019-04-01

Android Lottie動畫

---

在Android中，往往UI會讓寫一些動畫效果，比如啓動頁心形跳動，返回效果等。

一般我們在項目中常用的動畫無非是以下幾種：

• 普通動畫
• 幀動畫
• 屬性動畫
• 通過改變LayoutParams佈局參數來實現動畫

Lottie現在是Github上一個比較火的動畫庫，Github上關於Lottie庫介紹大概是這樣的：Lottie是一個爲Android和iOS設備提供的一個開源框架，它能夠解析通過Adobe After Effects 軟件做出來的動畫，動畫文件通過Bodymovin導出json文件，然後由Lottie中的LottieAnimationView解析json渲染動畫。 （如上圖）

也就是說Lottie框架可以通過解析json文件來實現動畫效果，而無需開發寫太多的代碼去控制動畫。

[Lottie Github地址：] (https://github.com/airbnb/lottie-android)

Lottie的使用

1. 下載Lottie庫

 在你工程的build.gradle文件裏添加如下配置

dependencies {
    //lottie
    implementation 'com.airbnb.android:lottie:2.7.0'
}

2. 簡單使用在佈局xml配置

      <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottieAnimationView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/heart"
        app:lottie_imageAssetsFolder="images"
        app:lottie_autoPlay="true"

 注意這裏的  app:lottie_rawRes，app:lottie_fileName這兩個屬性感覺是一樣的
 上圖xml裏面的@raw/heart是一個所謂的json文件，在本文開頭也說過，Lottie是通過解析json文件去實現的。

如此，動畫就能跑起來了，解釋下一下屬性：
1.lottie_fileName：在app/src/main/assets目錄下的動畫
json文件名。
2.lottie_loop：動畫是否循環播放，默認不循環播放。
3.lottie_autoPlay：動畫是否自動播放，默認不自動播放。
4.lottie_imageAssetsFolder：動畫所依賴的圖片目錄，在app/src/main/assets/目錄下的子目錄，該子目錄存放所有圖片。

你還可以在代碼中這樣使用：

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");//在assets目錄下的動畫json文件名。
animationView.loop(true);//設置動畫循環播放
animationView.setImageAssetsFolder("images/");//assets目錄下的子目錄，存放動畫所需的圖片
animationView.playAnimation();//播放動畫

Lottie框架會在後臺自動解析json動畫配置文件，解析完後開始跑動畫。

3. 控制動畫添加動畫監聽

animationView.addAnimatorUpdateListener((animation) -> {
    // Do something.動畫狀態監聽回調
});
animationView.playAnimation();//播放動畫
...
if (animationView.isAnimating()) {
    // Do something.動畫正在運行
}
...
//progress範圍0~1f，設置動畫進度
animationView.setProgress(0.5f);
...
// 自定義動畫時長，此處利用ValueAnimator值動畫來實時更新AnimationView的進度來達到控制動畫時長。
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
    .setDuration(500);
animator.addUpdateListener(animation -> {
    animationView.setProgress(animation.getAnimatedValue());
});
animator.start();//啓動動畫
...
animationView.cancelAnimation();//取消動畫

so，你可以隨意控制動畫的時常，動畫的播放進度，動畫的各種狀態等。

4.Lottie動畫緩存策略

由於Lottie框架是解析json文件來做動畫效果的，解析json文件是I/O耗時操作，爲了提高動畫加載速度，在同一個動畫需要多處多次使用時，就有必要對解析json的結果進行緩存，以免每次都解析json文件耗時操作。所以Lottie框架提供了三種不同程度的動畫緩存策略：

  /**
   * Caching strategy for compositions that will be reused frequently.
   * Weak or Strong indicates the GC reference strength of the composition in the cache.
   */
  public enum CacheStrategy {
    None,
    Weak,
    Strong
  }

• None 無緩存
• Weak 弱引用緩存
• Strong 強引用緩存

在LottieAnimationView控件的佈局中添加如下屬性：

 app:lottie_cacheStrategy="weak" (無緩存)

也可以在代碼裏添加：

animationView.setAnimation("hello_world.json", LottieAnimationView.CacheStrategy.Weak);

這個就是Lottie的簡單使用嘍，你只需要編寫xml其餘的事情交給它做就ok了。

附上跑完之後的效果圖（有機會可以寫一篇關於raw裏
面的json文件是如何製作出來的）：

喜歡的小夥伴可以幫我點個贊呀~ 不對的地方也請指出。

by—— LiuZX