Android•Lottie动画库填坑记
1. 入坑背景
由于從事直播軟件開發(fā)的緣故，本猿在版本迭代過(guò)程中一期不落的接觸到各式各樣動(dòng)畫效果。最早的時(shí)候，苦逼的用Android原生動(dòng)畫做直播間全屏禮物，反復(fù)的看著美工給的Flash效果圖，不斷的拼湊素材圖片，調(diào)整控制動(dòng)畫播放的屬性值，各個(gè)動(dòng)畫代碼都很類似，但卻無(wú)法套用，一連兩三天下來(lái)，基本上腦海中除了動(dòng)畫就一片空白...不過(guò)后來(lái)采用spine禮物框架以后，也就告別這樣的悲慘人生。然而就在上一版本中，產(chǎn)品因?yàn)?..的原因，讓不同的用戶進(jìn)入房間有不一樣的效果，其中就包括文字背景帶粒子效果，對(duì)于這樣的效果，Android原生動(dòng)畫顯然無(wú)能為力，如果采用幀動(dòng)畫，由于大量素材文件的引入帶來(lái)最直接的不良影響就是安裝包體積過(guò)大。經(jīng)過(guò)評(píng)估之后，決定使用三方動(dòng)畫框架，從服務(wù)器下載動(dòng)畫資源，在特定時(shí)間對(duì)不同資源文件進(jìn)行播放，最終采用相對(duì)比較成熟的Lottie框架。
2. 踩坑準(zhǔn)備
熟悉一個(gè)新的框架最快的方式就是查看官方文檔，因?yàn)楣俜轿臋n中一般都會(huì)給出一個(gè)Demo，果不其然，Lottie也是！文檔的閱讀量不是很大，通篇下來(lái)介紹了：
- 播放本地Assets目錄下的Json動(dòng)畫文件
- 通過(guò)Json數(shù)據(jù)播放動(dòng)畫
- 如何對(duì)動(dòng)畫進(jìn)行監(jiān)聽以及動(dòng)畫進(jìn)度調(diào)節(jié)
- Lottie動(dòng)畫數(shù)據(jù)的預(yù)加載和緩存
- 為Assets目錄下的Json動(dòng)畫文件配置動(dòng)畫所需要的素材
3. 開始入坑
然而，他介紹了這么多，并沒(méi)有一款適合我的。因?yàn)榉?wù)器下發(fā)不是簡(jiǎn)單的Json數(shù)據(jù)，是一個(gè)動(dòng)畫壓縮包，里面包括了動(dòng)畫文件和播放動(dòng)畫需要的素材文件，而且解壓后的文件也不在Asset目錄下。于是，只好跟蹤animationView.setAnimation("hello-world.json")源碼，看看最終到底做了什么事！
public void setAnimation(String animationName) {setAnimation(animationName, defaultCacheStrategy);} 復(fù)制代碼一個(gè)參數(shù)調(diào)用兩個(gè)參數(shù)同名方法，只好接著往下看！
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() {@Overridepublic 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);}});} 復(fù)制代碼從這里可以看到官方文檔中說(shuō)的緩存，包括強(qiáng)引用緩存，弱引用緩存，和無(wú)緩存模式，而且知道Json動(dòng)畫文件最終會(huì)轉(zhuǎn)化為Composition對(duì)象，而Compostion對(duì)象是通過(guò)LottieComposition.Factory.fromAssetFileName（...）的方法異步獲取的，于是我們只好接著往下跟蹤。
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);} 復(fù)制代碼看到這里我們這就明白，當(dāng)初傳入的文件名，最終還是通過(guò)getAssets().open(fileName)的方法，以流的方式進(jìn)行處理了，于是我們可以這樣加載放在其他目錄下的Json動(dòng)畫文件。
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() {@Overridepublic 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();}}}} 復(fù)制代碼異步的方式獲取Composition對(duì)象，因?yàn)椴皇褂胹etAnimation(final String animationName, final CacheStrategy cacheStrategy)方法，所以我們沒(méi)法使用框架提供的緩存，為了下次播放時(shí)不需要重新解析動(dòng)畫文件，使動(dòng)畫的加載速度更快，我們也需要重新做一套緩沖處理，如下
LocalLottieAnimUtil.loadAnimationByFile(animFile, new LocalLottieAnimUtil.OnLoadAnimationListener() {@Overridepublic void onFinished(LottieComposition lottieComposition) {if (lottieComposition != null) {mCenter.putLottieComposition(id, lottieComposition); // 使用} else {GiftFileUtils.deleteFile(getAnimFolder(link)); //刪除動(dòng)畫文件目錄，省的下次加載依然失敗，而是重新去下載資源壓縮包}public class EnterRoomResCenter {private SparseArray<LottieComposition> lottieCompositions = new SparseArray<>(); //緩存Compositionpublic void putLottieComposition(int id, LottieComposition composition) {lottieCompositions.put(id, composition);}public LottieComposition getAnimComposition(int id) {return mCenter.getLottieComposition(id);} } 復(fù)制代碼完成了Json動(dòng)畫文件的加載，接下來(lái)就是播放動(dòng)畫。正如源碼方法中 setAnimation(final String animationName, final CacheStrategy cacheStrategy) 一樣，我們也需要對(duì)LottieAnimationView進(jìn)行setComposition(composition)處理，然后調(diào)用LottieAnimationView.playAnimation()就可以進(jìn)行動(dòng)畫播放了，于是我這樣做了：
public static void playAnimation(LottieAnimationView animationView，LottieComposition composition) {animationView.setComposition(composition);animationView.playAnimation();} 復(fù)制代碼想想這個(gè)需求馬上就要搞定，于是我抿抿嘴偷偷笑了，這也太輕松了吧！于是端起茶杯去接了杯水，并運(yùn)行了項(xiàng)目，準(zhǔn)備回來(lái)看到那絢麗的動(dòng)畫。然而，事與愿違，等待我的是一片血紅的“大姨媽”。
java.lang.IllegalStateException: You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder 復(fù)制代碼看到這個(gè)錯(cuò)誤，想起官方文檔上面有說(shuō)，如何為動(dòng)畫配置播放動(dòng)畫所需要的素材，而且錯(cuò)誤提示也特別的明顯，看了看給的資源包的目錄，似乎發(fā)現(xiàn)了什么！于是我按照官方《為Assets目錄下的Json動(dòng)畫文件設(shè)置播放動(dòng)畫所需要的資源》一樣，改了一下代碼：
public static void playAnimation(LottieAnimationView animationView，String imageFolder, LottieComposition composition) {animationView.setComposition(composition);animationView.setImageAssetsFolder(imageFolder); // 新添加的animationView.playAnimation();} 復(fù)制代碼想著異常信息都提示這么明顯了，而且官方文檔給的模板也是這樣寫的，我更加確定這次動(dòng)畫播放絕對(duì)的沒(méi)有問(wèn)題。然而，動(dòng)畫最終還是沒(méi)有播放出來(lái)！沒(méi)辦法，只好繼續(xù)翻源碼，既然Assets目錄下setImageAssetsFolder(String folder)能生效，那我們只好從這個(gè)方法切入，看看folder變量最終是怎么樣被使用的。
@SuppressWarnings("WeakerAccess") public void setImageAssetsFolder(String imageAssetsFolder) {lottieDrawable.setImagesAssetsFolder(imageAssetsFolder);} 復(fù)制代碼沒(méi)有什么頭緒只好繼續(xù)往下看：
@SuppressWarnings("WeakerAccess") public void setImagesAssetsFolder(@Nullable String imageAssetsFolder) {this.imageAssetsFolder = imageAssetsFolder;} 復(fù)制代碼這個(gè)變量被設(shè)置成類屬性了，那么我們只需要在這個(gè)類下搜索怎么樣被使用就可以馬上定位出原因，發(fā)現(xiàn)有這么一行：
imageAssetBitmapManager = new ImageAssetBitmapManager(getCallback(),imageAssetsFolder, imageAssetDelegate, composition.getImages());} 復(fù)制代碼我擦，變量被傳遞到一個(gè)ImageAssetBitmapManager對(duì)象里面去了，只好進(jìn)這個(gè)類繼續(xù)跟蹤，最終定位到這樣一個(gè)方法：
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;} 復(fù)制代碼播放動(dòng)畫所需要的圖片資源都通過(guò)這個(gè)方法獲取，傳入一個(gè)圖片文件名稱，然后通過(guò)流獲取Bitmap對(duì)象并返回。這里需要介紹一下： 如果Json動(dòng)畫文件使用了圖片素材，里面的Json數(shù)據(jù)必然會(huì)聲明該圖片文件名。在Composition.Factory進(jìn)行解析為Composition時(shí)，里面使用的圖片都以鍵值對(duì)的方式存放到Composition的 private final Map<String, LottieImageAsset> images = new HashMap<>()中，LottieAnimationView.setCompostion(Compostion)最終落實(shí)到LottieDrawable.setCompostion(Compostion)，LottieDrawable為了獲取動(dòng)畫里面的bitmap對(duì)象，Lottie框架封裝了ImageAssetBitmapManager對(duì)象，在LottieDrawable中創(chuàng)建，將圖片的獲取轉(zhuǎn)移到imageAssetBitmapManager 中，并暴露public Bitmap bitmapForId(String id)的方法。
LottieImageAsset imageAsset = imageAssets.get(id); 復(fù)制代碼上面的 bitmapForId(String id) 方法體中有這么一行代碼，如上，之前Json動(dòng)畫文件解析的圖片都存放到imageAssets中，id是當(dāng)前需要加載的圖片素材名，通過(guò)get獲取到對(duì)應(yīng)的LottieImageAsset對(duì)象，其實(shí)里面也就包裝了該id值，做這層包裝可能為了以后方便擴(kuò)展吧！
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;...復(fù)制代碼同樣從 bitmapForId(String id) 方法體中提取出如上代碼，從上面可以看出如果assetDelegate == null，它就會(huì)從Asset的imagesFolder目錄下找素材文件。因?yàn)橹拔覀儾](méi)有設(shè)置過(guò)assetDelegate，而且我們的素材并不是在Asset的imagesFolder目錄下，所以獲取不到bitmap對(duì)象，動(dòng)畫無(wú)法播放也是情有可原的，不斷的反向追溯assetDelegate來(lái)源，找到LottieAnimationView.setImageAssetDelegate(ImageAssetDelegate assetDelegate)方法，所以調(diào)整之前的代碼，如下：
public static ImageAssetDelegate imageAssetDelegate = new ImageAssetDelegate() {@Overridepublic 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();} 復(fù)制代碼到現(xiàn)在為此，這個(gè)動(dòng)畫才能播放出來(lái)，這個(gè)地方有一點(diǎn)比較坑的就是ImageAssetDelegate的創(chuàng)建：
public static ImageAssetDelegate imageAssetDelegate = new ImageAssetDelegate() {@Overridepublic Bitmap fetchBitmap(LottieImageAsset asset) {String filePath = currentImgFolder + File.separator + asset.getFileName();return BitmapFactory.decodeFile(filePath, opts);}} 復(fù)制代碼每次使用的時(shí)候，我們都需要有這樣一個(gè)currentImgFolder 變量，維護(hù)這個(gè)文件所在的父目錄的位置，其實(shí)框架大可以在ImageAssetBitmapManager中這樣調(diào)用,將之前我們用setImageFolder（String folder）又重新的回調(diào)回來(lái)。
if (assetDelegate != null) {bitmap = assetDelegate.fetchBitmap(imagesFolder, imageAsset); // imagesFolder是新加bitmaps.put(id, bitmap);return bitmap;} 復(fù)制代碼4. Lottie坑點(diǎn)總結(jié)
- 在動(dòng)畫json文件中，有如下類似的數(shù)據(jù),其中W 和 H字段聲明了整個(gè)動(dòng)畫的輸出大小，你需要確保你使用的LottieAnimationVIew的寬高比和這個(gè)一致。
- 播放本地動(dòng)畫文件展示的動(dòng)畫偏小或偏大
注意ImageAssetDelegate的fetBitmap()代碼中indensity屬性的設(shè)置
@Overridepublic Bitmap fetchBitmap(LottieImageAsset asset) {String filePath = currentImgFolder + File.separator + asset.getFileName();BitmapFactory.Options opts = new BitmapFactory.Options();opts.inDensity = 110; //請(qǐng)留意這個(gè)值的設(shè)定return BitmapFactory.decodeFile(filePath, opts); //這里還有坑，請(qǐng)往下接著看} 復(fù)制代碼- Lottie庫(kù)回收素材圖片bitmap引發(fā)的空指針問(wèn)題 （1） 先看看Lottie對(duì)素材圖片進(jìn)行緩存的方法：
（2） 再看看Lottie對(duì)緩存圖片的回收處理：
void recycleBitmaps() {Iterator<Map.Entry<String, Bitmap>> it = bitmaps.entrySet().iterator();while (it.hasNext()) {Map.Entry<String, Bitmap> entry = it.next();entry.getValue().recycle();it.remove();}} 復(fù)制代碼（3） 結(jié)論： 前后對(duì)比，有沒(méi)有發(fā)現(xiàn)Lottie對(duì)緩存的素材圖片bitmap對(duì)象并沒(méi)有做判空處理，就直接回收了（Version 1.5.3）。
解決辦法： 如果是加載本地素材圖片（非Assets目錄）可以采用如下辦法：
public Bitmap fetchBitmap(LottieImageAsset asset) {String filePath = currentImgFolder + File.separator + asset.getFileName();Bitmap bitmap = BitmapFactory.decodeFile(filePath, opts);if (bitmap == null) {bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ALPHA_8);}return bitmap;} 復(fù)制代碼5. 使用總結(jié)
- 播放放置在Asset目錄下的動(dòng)畫文件
設(shè)置播放文件： setAnimation("文件名") 如果動(dòng)畫文件帶素材： setImageAssetsFolder("文件夾名")
- 播放系統(tǒng)目錄下的動(dòng)畫文件
異步獲取Compostion對(duì)象： LottieComposition.Factory.fromInputStream() 設(shè)置播放的素材： setComposition(composition) 如果動(dòng)畫文件帶素材: setImageAssetsFolder("文件夾名") + setImageAssetDelegate(imageAssetDelegate)
轉(zhuǎn)載于:https://juejin.im/post/5b8a2fc1e51d4559a81eec56
總結(jié)
以上是生活随笔為你收集整理的Android•Lottie动画库填坑记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 图像标注工具总结
- 下一篇： Android Annotation-让