作者 | 負了時光不負卿

地址 | http://www.jianshu.com/p/89c64253fd77

宣告 | 本文是 負了時光不負卿 原創，已獲授權釋出，未經原作者允許請勿轉載

入坑背景

由於從事直播軟體開發的緣故，本猿在版本迭代過程中一期不落的接觸到各式各樣動畫效果。最早的時候，苦逼的用 Android 原生動畫做直播間全屏禮物，反覆的看著美工給的 Flash 效果圖，不斷的拼湊素材圖片，調整控制動畫播放的屬性值，各個動畫程式碼都很類似，但卻無法套用，一連兩三天下來，基本上腦海中除了動畫就一片空白

踩坑準備

熟悉一個新的框架最快的方式就是檢視官方文件，因為官方文件中一般都會給出一個 Demo，果不其然，Lottie 也是！文件的閱讀量不是很大，通篇下來介紹了：

播放本地 Assets 目錄下的 Json 動畫檔案
通過 Json 資料播放動畫
如何對動畫進行監聽以及動畫進度調節
Lottie 動畫資料的預載入和快取
為 Assets 目錄下的 Json 動畫檔案配置動畫所需要的素材

開始入坑

然而，他介紹了這麼多，並沒有一款適合我的。因為伺服器下發不是簡單的 Json 資料，是一個動畫壓縮包，裡面包括了動畫檔案和播放動畫需要的素材檔案，而且解壓後的檔案也不在 Asset 目錄下。於是，只好跟蹤 animationView.setAnimation("hello-world.json")原始碼，看看最終到底做了什麼事！

public void setAnimation
 
(String animationName) {
    setAnimation(animationName, defaultCacheStrategy);
  }

一個引數呼叫兩個引數同名方法，只好接著往下看！

public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
    this.animationName = animationName;
    if (weakRefCache.containsKey(animationName)) {
      WeakReference<LottieComposition> compRef = weakRefCache.get
 
(animationName);
      if (compRef.get() != null) {
        setComposition(compRef.get());
        return;
      }
    } else if (strongRefCache.containsKey(animationName)) {
      setComposition(strongRefCache.get(animationName));
      return;
    }
    this.animationName = animationName;
    lottieDrawable.cancelAnimation();
    cancelLoaderTask();
    compositionLoader = LottieComposition.Factory.fromAssetFileName(getContext(), animationName,
        new OnCompositionLoadedListener() {
          @Override
          public void onCompositionLoaded(LottieComposition composition) {
            if (cacheStrategy == CacheStrategy.Strong) {
              strongRefCache.put(animationName, composition);
            } else if (cacheStrategy == CacheStrategy.Weak) {
              weakRefCache.put(animationName, new WeakReference<>(composition));
            }
            setComposition(composition);
          }
        });
  }

從這裡可以看到官方文件中說的快取，包括強引用快取，弱引用快取，和無快取模式，而且知道 Json 動畫檔案最終會轉化為 Composition 物件，而 Compostion 物件是通過 LottieComposition

public static Cancellable fromAssetFileName(Context context, String fileName,
        OnCompositionLoadedListener loadedListener) {
      InputStream stream;
      try {
        stream = context.getAssets().open(fileName);
      } catch (IOException e) {
        throw new IllegalStateException("Unable to find file " + fileName, e);
      }
      return fromInputStream(context, stream, loadedListener);
    }

看到這裡我們這就明白，當初傳入的檔名，最終還是通過getAssets().open(fileName) 的方法，以流的方式進行處理了，於是我們可以這樣載入放在其他目錄下的 Json 動畫檔案。

public static void loadAnimationByFile(File file, final OnLoadAnimationListener listener) {
        if (file == null || !file.exists()) {
            if (listener != null) {
                listener.onFinished(null);
            }
            return;
        }
        FileInputStream fins = null;
        try {
            fins = new FileInputStream(file);
            LottieComposition.Factory.fromInputStream(GlobalContext.getAppContext(), fins, new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(LottieComposition composition) {
                    if (listener != null) {
                        listener.onFinished(composition);
                    }
                }
            });
        } catch (IOException e) {
            e.printStackTrace();
            if (listener != null) {
                listener.onFinished(null);
            }
            if (fins != null) {
                try {
                    fins.close();
                } catch (IOException e1) {
                    e1.printStackTrace();
                }
            }
        }
    }

非同步的方式獲取 Composition 物件，因為不使用 setAnimation(final String animationName, final CacheStrategy cacheStrategy) 方法，所以我們沒法使用框架提供的快取，為了下次播放時不需要重新解析動畫檔案，使動畫的載入速度更快，我們也需要重新做一套緩衝處理，如下

LocalLottieAnimUtil.loadAnimationByFile(animFile, new LocalLottieAnimUtil.OnLoadAnimationListener() {
     @Override
    public void onFinished(LottieComposition lottieComposition) {
           if (lottieComposition != null) {
                 mCenter.putLottieComposition(id, lottieComposition);  // 使用
            } else {
                GiftFileUtils.deleteFile(getAnimFolder(link));  //刪除動畫檔案目錄，省的下次載入依然失敗，而是重新去下載資源壓縮包
         }
public class EnterRoomResCenter {
    private SparseArray<LottieComposition> lottieCompositions = new SparseArray<>();  //快取Composition
    public void putLottieComposition(int id, LottieComposition composition) {
        lottieCompositions.put(id, composition);
    }
    public LottieComposition getAnimComposition(int id) {
        return mCenter.getLottieComposition(id);
    }
}

完成了 Json 動畫檔案的載入，接下來就是播放動畫。正如原始碼方法中 setAnimation(final String animationName, final CacheStrategy cacheStrategy)  一樣，我們也需要對 LottieAnimationView 進行setComposition(composition) 處理，然後呼叫LottieAnimationView.playAnimation() 就可以進行動畫播放了，於是我這樣做了：

public static void playAnimation(LottieAnimationView animationView，LottieComposition composition) {
        animationView.setComposition(composition);
        animationView.playAnimation();
    }

想想這個需求馬上就要搞定，於是我抿抿嘴偷偷笑了，這也太輕鬆了吧！於是端起茶杯去接了杯水，並運行了專案，準備回來看到那絢麗的動畫。然而，事與願違，等待我的是一片血紅的“大姨媽”。

java.lang.IllegalStateException: 
You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder

看到這個錯誤，想起官方文件上面有說，如何為動畫配置播放動畫所需要的素材，而且錯誤提示也特別的明顯，看了看給的資源包的目錄，似乎發現了什麼！於是我按照官方《為 Assets 目錄下的 Json動畫檔案設定播放動畫所需要的資源》一樣，改了一下程式碼：

public static void playAnimation(LottieAnimationView animationView，String imageFolder, LottieComposition composition) {
        animationView.setComposition(composition);
       animationView.setImageAssetsFolder(imageFolder);   // 新新增的
        animationView.playAnimation();
    }

想著異常資訊都提示這麼明顯了，而且官方文件給的模板也是這樣寫的，我更加確定這次動畫播放絕對的沒有問題。然而，動畫最終還是沒有播放出來！沒辦法，只好繼續翻原始碼，既然 Assets 目錄下setImageAssetsFolder

@SuppressWarnings("WeakerAccess") public void setImageAssetsFolder(String imageAssetsFolder) {
    lottieDrawable.setImagesAssetsFolder(imageAssetsFolder);
  }

沒有什麼頭緒只好繼續往下看：

@SuppressWarnings("WeakerAccess") public void setImagesAssetsFolder(@Nullable String imageAssetsFolder) {
    this.imageAssetsFolder = imageAssetsFolder;
  }

這個變數被設定成類屬性了，那麼我們只需要在這個類下搜尋怎麼樣被使用就可以馬上定位出原因，發現有這麼一行：

imageAssetBitmapManager = new ImageAssetBitmapManager(getCallback(),
          imageAssetsFolder, imageAssetDelegate, composition.getImages());
    }

我擦，變數被傳遞到一個 ImageAssetBitmapManager 物件裡面去了，只好進這個類繼續跟蹤，最終定位到這樣一個方法：

Bitmap bitmapForId(String id) {
    Bitmap bitmap = bitmaps.get(id);
    if (bitmap == null) {
      LottieImageAsset imageAsset = imageAssets.get(id);
      if (imageAsset == null) {
        return null;
      }
      if (assetDelegate != null) {
        bitmap = assetDelegate.fetchBitmap(imageAsset);
        bitmaps.put(id, bitmap);
        return bitmap;
      }
      InputStream is;
      try {
        if (TextUtils.isEmpty(imagesFolder)) {
          throw new IllegalStateException("You must set an images folder before loading an image." +
              " Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder");
        }
        is = context.getAssets().open(imagesFolder + imageAsset.getFileName());
      } catch (IOException e) {
        Log.w(L.TAG, "Unable to open asset.", e);
        return null;
      }
      BitmapFactory.Options opts = new BitmapFactory.Options();
      opts.inScaled = true;
      opts.inDensity = 160;
      bitmap = BitmapFactory.decodeStream(is, null, opts);
      bitmaps.put(id, bitmap);
    }
    return bitmap;
  }

播放動畫所需要的圖片資源都通過這個方法獲取，傳入一個圖片檔名稱，然後通過流獲取 Bitmap 物件並返回。這裡需要介紹一下：

如果 Json 動畫檔案使用了圖片素材，裡面的 Json 資料必然會宣告該圖片檔名。在 Composition.Factory 進行解析為 Composition 時，裡面使用的圖片都以鍵值對的方式存放到 Composition 的

private final Map<String, LottieImageAsset> images = new HashMap<>() 中，LottieAnimationView.setCompostion(Compostion) 最終落實到LottieDrawable.setCompostion(Compostion)，LottieDrawable 為了獲取動畫裡面的 bitmap 物件，Lottie 框架封裝了ImageAssetBitmapManager 物件，在 LottieDrawable 中建立，將圖片的獲取轉移到 imageAssetBitmapManager 中，並暴露 public Bitmap bitmapForId(String id) 的方法。

LottieImageAsset imageAsset = imageAssets.get(id);

上面的 bitmapForId(String id) 方法體中有這麼一行程式碼，如上，之前Json 動畫檔案解析的圖片都存放到 imageAssets中，id 是當前需要載入的圖片素材名，通過 get 獲取到對應的 LottieImageAsset 物件，其實裡面也就包裝了該 id 值，做這層包裝可能為了以後方便擴充套件吧！

if (assetDelegate != null) {
        bitmap = assetDelegate.fetchBitmap(imageAsset);
        bitmaps.put(id, bitmap);
        return bitmap;
      }
     ...
      is = context.getAssets().open(imagesFolder + imageAsset.getFileName());
     bitmap = BitmapFactory.decodeStream(is, null, opts);
     return bitmap;
    ...

同樣從 bitmapForId(String id) 方法體中提取出如上程式碼，從上面可以看出如果 assetDelegate == null，它就會從 Asset的imagesFolder 目錄下找素材檔案。因為之前我們並沒有設定過 assetDelegate，而且我們的素材並不是在 Asset 的 imagesFolder 目錄下，所以獲取不到 bitmap 物件，動畫無法播放也是情有可原的，不斷的反向追溯assetDelegate 來源，找到LottieAnimationView.setImageAssetDelegate(ImageAssetDelegate assetDelegate) 方法，所以調整之前的程式碼，如下：

public static ImageAssetDelegate imageAssetDelegate = new ImageAssetDelegate() {
        @Override
        public Bitmap fetchBitmap(LottieImageAsset asset) {
            String filePath = currentImgFolder + File.separator + asset.getFileName();
            return BitmapFactory.decodeFile(filePath, opts);
        }
    }
    public static void playAnimation(LottieAnimationView animationView, String imageFolder, ImageAssetDelegate imageAssetDelegate, LottieComposition composition) {
        if (animationView == null || composition == null) {
            return;
        }
        animationView.setComposition(composition);
        animationView.setImageAssetsFolder(imageFolder);
        animationView.setImageAssetDelegate(imageAssetDelegate);
        animationView.playAnimation();
    }

到現在為此，這個動畫才能播放出來，這個地方有一點比較坑的就是ImageAssetDelegate 的建立：

public static ImageAssetDelegate imageAssetDelegate = new ImageAssetDelegate() {
        @Override
        public Bitmap fetchBitmap(LottieImageAsset asset) {
            String filePath = currentImgFolder + File.separator + asset.getFileName();
            return BitmapFactory.decodeFile(filePath, opts);
        }
    }

每次使用的時候，我們都需要有這樣一個 currentImgFolder 變數，維護這個檔案所在的父目錄的位置，其實框架大可以在ImageAssetBitmapManager 中這樣呼叫,將之前我們用setImageFolder（String folder） 又重新的回調回來。

if (assetDelegate != null) {
        bitmap = assetDelegate.fetchBitmap(imagesFolder, imageAsset);    // imagesFolder是新加
        bitmaps.put(id, bitmap);
        return bitmap;
      }

動畫展示效果不正常

• 在動畫 json 檔案中，有如下類似的資料,其中 W 和 H 欄位聲明瞭整個動畫的輸出大小，你需要確保你使用的LottieAnimationVIew 的寬高比和這個一致。

{"v":"4.9.0","fr":25,"ip":0,"op":50,"w":1242,"h":128,"nm":"WWW","ddd":0,"assets": ....

• 播放本地動畫檔案展示的動畫偏小或偏大

注意 ImageAssetDelegate 的 fetBitmap() 程式碼中 indensity 屬性的設定

@Override
    public Bitmap fetchBitmap(LottieImageAsset asset) {
        String filePath = currentImgFolder + File.separator + asset.getFileName();
        BitmapFactory.Options opts = new BitmapFactory.Options();
        opts.inDensity = 110;                                                                           //請留意這個值的設定
        return BitmapFactory.decodeFile(filePath, opts);
    }

• 同一個 LottieAnimationView 播放兩個帶素材的 Json 動畫檔案，會共用同一張素材圖片。

Bitmap bitmapForId(String id) {
    Bitmap bitmap = bitmaps.get(id);
    ... 
    return bitmap;
  }

在 ImageAssetBitmapManager 的 bitmapForId() 的方法會對bitmap 進行快取，建立<檔名 ： Bitmap>的對映表，如果兩個Json 動畫檔案裡面使用的素材圖同名的話，就會出現如下問題。解決辦法就是保證每個 Json 動畫檔案使用的素材圖片不同名。

實用總結

• 播放放置在 Asset 目錄下的動畫檔案

設定播放檔案： setAnimation("檔名")
如果動畫檔案帶素材： setImageAssetsFolder("資料夾名")

• 播放系統目錄下的動畫檔案

非同步獲取 Compostion 物件： LottieComposition.Factory.fromInputStream()
設定播放的素材： setComposition(composition)
如果動畫檔案帶素材: setImageAssetsFolder("資料夾名") + setImageAssetDelegate(imageAssetDelegate)

與之相關