devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android•Lottie动画库填坑记

作者：AllinToyou | 2024-03-02 06:01:02

赞

踩

you must set an images folder before loading an image. set it with lottiecom
1. 入坑背景

由于从事直播软件开发的缘故，本猿在版本迭代过程中一期不落的接触到各式各样动画效果。最早的时候，苦逼的用Android原生动画做直播间全屏礼物，反复的看着美工给的Flash效果图，不断的拼凑素材图片，调整控制动画播放的属性值，各个动画代码都很类似，但却无法套用，一连两三天下来，基本上脑海中除了动画就一片空白...不过后来采用spine礼物框架以后，也就告别这样的悲惨人生。然而就在上一版本中，产品因为...的原因，让不同的用户进入房间有不一样的效果，其中就包括文字背景带粒子效果，对于这样的效果，Android原生动画显然无能为力，如果采用帧动画，由于大量素材文件的引入带来最直接的不良影响就是安装包体积过大。经过评估之后，决定使用三方动画框架，从服务器下载动画资源，在特定时间对不同资源文件进行播放，最终采用相对比较成熟的Lottie框架。

2. 踩坑准备

熟悉一个新的框架最快的方式就是查看官方文档，因为官方文档中一般都会给出一个Demo，果不其然，Lottie也是！文档的阅读量不是很大，通篇下来介绍了：

  • 播放本地Assets目录下的Json动画文件
  • 通过Json数据播放动画
  • 如何对动画进行监听以及动画进度调节
  • Lottie动画数据的预加载和缓存
  • 为Assets目录下的Json动画文件配置动画所需要的素材
3. 开始入坑

然而，他介绍了这么多，并没有一款适合我的。因为服务器下发不是简单的Json数据，是一个动画压缩包，里面包括了动画文件和播放动画需要的素材文件，而且解压后的文件也不在Asset目录下。于是，只好跟踪animationView.setAnimation("hello-world.json")源码，看看最终到底做了什么事！

  1.   public void setAnimation(String animationName) {
  2.     setAnimation(animationName, defaultCacheStrategy);
  3.   }
  4. 复制代码

一个参数调用两个参数同名方法，只好接着往下看！

  1.   public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
  2.     this.animationName = animationName;
  3.     if (weakRefCache.containsKey(animationName)) {
  4.       WeakReference<LottieComposition> compRef = weakRefCache.get(animationName);
  5.       if (compRef.get() != null) {
  6.         setComposition(compRef.get());
  7.         return;
  8.       }
  9.     } else if (strongRefCache.containsKey(animationName)) {
  10.       setComposition(strongRefCache.get(animationName));
  11.       return;
  12.     }
  13.  
  14.     this.animationName = animationName;
  15.     lottieDrawable.cancelAnimation();
  16.     cancelLoaderTask();
  17.     compositionLoader = LottieComposition.Factory.fromAssetFileName(getContext(), animationName,
  18.         new OnCompositionLoadedListener() {
  19.           @Override
  20.           public void onCompositionLoaded(LottieComposition composition) {
  21.             if (cacheStrategy == CacheStrategy.Strong) {
  22.               strongRefCache.put(animationName, composition);
  23.             } else if (cacheStrategy == CacheStrategy.Weak) {
  24.               weakRefCache.put(animationName, new WeakReference<>(composition));
  25.             }
  26.  
  27.             setComposition(composition);
  28.           }
  29.         });
  30.   }
  31. 复制代码

从这里可以看到官方文档中说的缓存，包括强引用缓存，弱引用缓存，和无缓存模式，而且知道Json动画文件最终会转化为Composition对象，而Compostion对象是通过LottieComposition.Factory.fromAssetFileName（...）的方法异步获取的，于是我们只好接着往下跟踪。

  1.  public static Cancellable fromAssetFileName(Context context, String fileName,
  2.         OnCompositionLoadedListener loadedListener) {
  3.       InputStream stream;
  4.       try {
  5.         stream = context.getAssets().open(fileName);
  6.       } catch (IOException e) {
  7.         throw new IllegalStateException("Unable to find file " + fileName, e);
  8.       }
  9.       return fromInputStream(context, stream, loadedListener);
  10.     }
  11. 复制代码

看到这里我们这就明白，当初传入的文件名，最终还是通过getAssets().open(fileName)的方法，以流的方式进行处理了，于是我们可以这样加载放在其他目录下的Json动画文件。

  1.  public static void loadAnimationByFile(File file, final OnLoadAnimationListener listener) {
  2.         if (file == null || !file.exists()) {
  3.             if (listener != null) {
  4.                 listener.onFinished(null);
  5.             }
  6.             return;
  7.         }
  8.         FileInputStream fins = null;
  9.         try {
  10.             fins = new FileInputStream(file);
  11.             LottieComposition.Factory.fromInputStream(GlobalContext.getAppContext(), fins, new OnCompositionLoadedListener() {
  12.                 @Override
  13.                 public void onCompositionLoaded(LottieComposition composition) {
  14.                     if (listener != null) {
  15.                         listener.onFinished(composition);
  16.                     }
  17.                 }
  18.             });
  19.         } catch (IOException e) {
  20.             e.printStackTrace();
  21.             if (listener != null) {
  22.                 listener.onFinished(null);
  23.             }
  24.             if (fins != null) {
  25.                 try {
  26.                     fins.close();
  27.                 } catch (IOException e1) {
  28.                     e1.printStackTrace();
  29.                 }
  30.             }
  31.         }
  32.     }
  33. 复制代码

异步的方式获取Composition对象，因为不使用setAnimation(final String animationName, final CacheStrategy cacheStrategy)方法，所以我们没法使用框架提供的缓存，为了下次播放时不需要重新解析动画文件，使动画的加载速度更快，我们也需要重新做一套缓冲处理，如下

  1.  LocalLottieAnimUtil.loadAnimationByFile(animFile, new LocalLottieAnimUtil.OnLoadAnimationListener() {
  2.      @Override
  3.     public void onFinished(LottieComposition lottieComposition) {
  4.            if (lottieComposition != null) {
  5.                  mCenter.putLottieComposition(id, lottieComposition);  // 使用
  6.             } else {
  7.                 GiftFileUtils.deleteFile(getAnimFolder(link));  //删除动画文件目录，省的下次加载依然失败，而是重新去下载资源压缩包
  8.          }
  9.  
  10.  
  11. public class EnterRoomResCenter {
  12.     private SparseArray<LottieComposition> lottieCompositions = new SparseArray<>();  //缓存Composition
  13.  
  14.     public void putLottieComposition(int id, LottieComposition composition) {
  15.         lottieCompositions.put(id, composition);
  16.     }
  17.  
  18.     public LottieComposition getAnimComposition(int id) {
  19.         return mCenter.getLottieComposition(id);
  20.     }
  21. }
  22. 复制代码

完成了Json动画文件的加载，接下来就是播放动画。正如源码方法中 setAnimation(final String animationName, final CacheStrategy cacheStrategy) 一样，我们也需要对LottieAnimationView进行setComposition(composition)处理，然后调用LottieAnimationView.playAnimation()就可以进行动画播放了，于是我这样做了：

  1.   public static void playAnimation(LottieAnimationView animationView，LottieComposition composition) {
  2.         animationView.setComposition(composition);
  3.         animationView.playAnimation();
  4.     }
  5. 复制代码

想想这个需求马上就要搞定，于是我抿抿嘴偷偷笑了，这也太轻松了吧！于是端起茶杯去接了杯水，并运行了项目，准备回来看到那绚丽的动画。然而，事与愿违，等待我的是一片血红的“大姨妈”。

  1. java.lang.IllegalStateException: 
  2. You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder
  3. 复制代码

看到这个错误，想起官方文档上面有说，如何为动画配置播放动画所需要的素材，而且错误提示也特别的明显，看了看给的资源包的目录，似乎发现了什么！于是我按照官方《为Assets目录下的Json动画文件设置播放动画所需要的资源》一样，改了一下代码： 

  1.   public static void playAnimation(LottieAnimationView animationView，String imageFolder, LottieComposition composition) {
  2.         animationView.setComposition(composition);
  3.        animationView.setImageAssetsFolder(imageFolder);   // 新添加的
  4.         animationView.playAnimation();
  5.     }
  6. 复制代码

想着异常信息都提示这么明显了，而且官方文档给的模板也是这样写的，我更加确定这次动画播放绝对的没有问题。然而，动画最终还是没有播放出来！没办法，只好继续翻源码，既然Assets目录下setImageAssetsFolder(String folder)能生效，那我们只好从这个方法切入，看看folder变量最终是怎么样被使用的。

  1.   @SuppressWarnings("WeakerAccess") public void setImageAssetsFolder(String imageAssetsFolder) {
  2.     lottieDrawable.setImagesAssetsFolder(imageAssetsFolder);
  3.   }
  4. 复制代码

没有什么头绪只好继续往下看：

  1.  @SuppressWarnings("WeakerAccess") public void setImagesAssetsFolder(@Nullable String imageAssetsFolder) {
  2.     this.imageAssetsFolder = imageAssetsFolder;
  3.   }
  4. 复制代码

这个变量被设置成类属性了，那么我们只需要在这个类下搜索怎么样被使用就可以马上定位出原因，发现有这么一行：

  1.  imageAssetBitmapManager = new ImageAssetBitmapManager(getCallback(),
  2.           imageAssetsFolder, imageAssetDelegate, composition.getImages());
  3.     }
  4. 复制代码

我擦，变量被传递到一个ImageAssetBitmapManager对象里面去了，只好进这个类继续跟踪，最终定位到这样一个方法：

  1. Bitmap bitmapForId(String id) {
  2.     Bitmap bitmap = bitmaps.get(id);
  3.     if (bitmap == null) {
  4.       LottieImageAsset imageAsset = imageAssets.get(id);
  5.       if (imageAsset == null) {
  6.         return null;
  7.       }
  8.       if (assetDelegate != null) {
  9.         bitmap = assetDelegate.fetchBitmap(imageAsset);
  10.         bitmaps.put(id, bitmap);
  11.         return bitmap;
  12.       }
  13.  
  14.       InputStream is;
  15.       try {
  16.         if (TextUtils.isEmpty(imagesFolder)) {
  17.           throw new IllegalStateException("You must set an images folder before loading an image." +
  18.               " Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder");
  19.         }
  20.         is = context.getAssets().open(imagesFolder + imageAsset.getFileName());
  21.       } catch (IOException e) {
  22.         Log.w(L.TAG, "Unable to open asset.", e);
  23.         return null;
  24.       }
  25.       BitmapFactory.Options opts = new BitmapFactory.Options();
  26.       opts.inScaled = true;
  27.       opts.inDensity = 160;
  28.       bitmap = BitmapFactory.decodeStream(is, null, opts);
  29.       bitmaps.put(id, bitmap);
  30.     }
  31.     return bitmap;
  32.   }
  33. 复制代码

播放动画所需要的图片资源都通过这个方法获取，传入一个图片文件名称，然后通过流获取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)的方法。

  1. LottieImageAsset imageAsset = imageAssets.get(id);
  2. 复制代码

上面的 bitmapForId(String id) 方法体中有这么一行代码，如上，之前Json动画文件解析的图片都存放到imageAssets中，id是当前需要加载的图片素材名，通过get获取到对应的LottieImageAsset对象，其实里面也就包装了该id值，做这层包装可能为了以后方便扩展吧！

  1.  
  2.       if (assetDelegate != null) {
  3.         bitmap = assetDelegate.fetchBitmap(imageAsset);
  4.         bitmaps.put(id, bitmap);
  5.         return bitmap;
  6.       }
  7.      ...
  8.       is = context.getAssets().open(imagesFolder + imageAsset.getFileName());
  9.      bitmap = BitmapFactory.decodeStream(is, null, opts);
  10.      return bitmap;
  11.     ...
  12.   
  13. 复制代码

同样从 bitmapForId(String id) 方法体中提取出如上代码，从上面可以看出如果assetDelegate == null，它就会从Asset的imagesFolder目录下找素材文件。因为之前我们并没有设置过assetDelegate，而且我们的素材并不是在Asset的imagesFolder目录下，所以获取不到bitmap对象，动画无法播放也是情有可原的，不断的反向追溯assetDelegate来源，找到LottieAnimationView.setImageAssetDelegate(ImageAssetDelegate assetDelegate)方法，所以调整之前的代码，如下：

  1. public static ImageAssetDelegate imageAssetDelegate = new ImageAssetDelegate() {
  2.         @Override
  3.         public Bitmap fetchBitmap(LottieImageAsset asset) {
  4.             String filePath = currentImgFolder + File.separator + asset.getFileName();
  5.             return BitmapFactory.decodeFile(filePath, opts);
  6.         }
  7.     }
  8.     public static void playAnimation(LottieAnimationView animationView, String imageFolder, ImageAssetDelegate imageAssetDelegate, LottieComposition composition) {
  9.         if (animationView == null || composition == null) {
  10.             return;
  11.         }
  12.         animationView.setComposition(composition);
  13.         animationView.setImageAssetsFolder(imageFolder);
  14.         animationView.setImageAssetDelegate(imageAssetDelegate);
  15.         animationView.playAnimation();
  16.     }
  17. 复制代码

到现在为此，这个动画才能播放出来，这个地方有一点比较坑的就是ImageAssetDelegate的创建：

  1. public static ImageAssetDelegate imageAssetDelegate = new ImageAssetDelegate() {
  2.         @Override
  3.         public Bitmap fetchBitmap(LottieImageAsset asset) {
  4.             String filePath = currentImgFolder + File.separator + asset.getFileName();
  5.             return BitmapFactory.decodeFile(filePath, opts);
  6.         }
  7.     }
  8. 复制代码

每次使用的时候，我们都需要有这样一个currentImgFolder 变量，维护这个文件所在的父目录的位置，其实框架大可以在ImageAssetBitmapManager中这样调用,将之前我们用setImageFolder（String folder）又重新的回调回来。

  1. if (assetDelegate != null) {
  2.         bitmap = assetDelegate.fetchBitmap(imagesFolder, imageAsset);    // imagesFolder是新加
  3.         bitmaps.put(id, bitmap);
  4.         return bitmap;
  5.       }
  6. 复制代码
4. Lottie坑点总结
  • 在动画json文件中，有如下类似的数据,其中W 和 H字段声明了整个动画的输出大小，你需要确保你使用的LottieAnimationVIew的宽高比和这个一致。
  1. {"v":"4.9.0","fr":25,"ip":0,"op":50,"w":1242,"h":128,"nm":"WWW","ddd":0,"assets": ....
  2. 复制代码
  • 播放本地动画文件展示的动画偏小或偏大

注意ImageAssetDelegate的fetBitmap()代码中indensity属性的设置

  1.     @Override
  2.     public Bitmap fetchBitmap(LottieImageAsset asset) {
  3.         String filePath = currentImgFolder + File.separator + asset.getFileName();
  4.         BitmapFactory.Options opts = new BitmapFactory.Options();
  5.         opts.inDensity = 110;                                                                 //请留意这个值的设定
  6.         return BitmapFactory.decodeFile(filePath, opts);                                     //这里还有坑，请往下接着看
  7.     }
  8. 复制代码
  • Lottie库回收素材图片bitmap引发的空指针问题 （1） 先看看Lottie对素材图片进行缓存的方法：
  1. Bitmap bitmapForId(String id) {
  2.       ...
  3.       if (assetDelegate != null) {
  4.         bitmap = assetDelegate.fetchBitmap(imageAsset);
  5.         bitmaps.put(id, bitmap);                       //将Bitmap进行存储，可能Bitmap对象为null
  6.         return bitmap;
  7.       }
  8.       ...
  9.       BitmapFactory.Options opts = new BitmapFactory.Options();
  10.       opts.inScaled = true;
  11.       opts.inDensity = 160;
  12.       bitmap = BitmapFactory.decodeStream(is, null, opts);
  13.       bitmaps.put(id, bitmap);                         //将Bitmap进行存储，可能Bitmap对象为null
  14.     }
  15.     return bitmap;
  16.   }
  17. 复制代码

（2） 再看看Lottie对缓存图片的回收处理：

  1.   void recycleBitmaps() {
  2.     Iterator<Map.Entry<String, Bitmap>> it = bitmaps.entrySet().iterator();
  3.     while (it.hasNext()) {
  4.       Map.Entry<String, Bitmap> entry = it.next();
  5.       entry.getValue().recycle();
  6.       it.remove();
  7.     }
  8.   }
  9. 复制代码

（3） 结论： 前后对比，有没有发现Lottie对缓存的素材图片bitmap对象并没有做判空处理，就直接回收了（Version 1.5.3）。

解决办法： 如果是加载本地素材图片（非Assets目录）可以采用如下办法：

  1.   public Bitmap fetchBitmap(LottieImageAsset asset) {
  2.         String filePath = currentImgFolder + File.separator + asset.getFileName();
  3.         Bitmap bitmap = BitmapFactory.decodeFile(filePath, opts);
  4.         if (bitmap == null) {
  5.             bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ALPHA_8);
  6.         }
  7.         return bitmap;
  8.     }
  9. 复制代码
5. 使用总结
  • 播放放置在Asset目录下的动画文件

设置播放文件： setAnimation("文件名") 如果动画文件带素材： setImageAssetsFolder("文件夹名")

  • 播放系统目录下的动画文件

异步获取Compostion对象： LottieComposition.Factory.fromInputStream() 设置播放的素材： setComposition(composition) 如果动画文件带素材: setImageAssetsFolder("文件夹名") + setImageAssetDelegate(imageAssetDelegate)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/179359
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号