maoruibin / maoruibin/maoruibin.github.com

使用 Lottie 播放网络动画

Open
#57 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
22
Forks
4
PR merge metrics
No merged PRs in 30d

Description

因为业务需求,微博首页需要下拉全屏动画考虑采用动态下发 json 文件进行动画播放,Android 端调研后随即实现之:
核心代码如下:

try {
    JSONObject jsonObject = new JSONObject(FileUtils.readFileForString(json));
    //设置 json  文件,这个文件是通过网络下载的
    fullScreenLottie.setAnimation(jsonObject);
    //因为这个动画需要图片资源进行配合,所以服务端还下发了图片素材,这里必须要进行动态匹配
    //这里的 lottieImageAsset 很重要,他是一个 Lottie 文件的映射,在json 文件中已经制定了 assets 资源的名称以及相对位置,但是资源在网络,此时需要做一个转换,具体转换规则就要看具体业务场景,这里根据自己的需求,进行了如下处理,可以通过 lottieImageAsset 拿到 json 文件中 assets 资源的属性,然后进行操作

    fullScreenLottie.setImageAssetDelegate(new ImageAssetDelegate() {
        @Override
        public Bitmap fetchBitmap(LottieImageAsset lottieImageAsset) {
            File imageFile = new File(images,lottieImageAsset.getFileName());
            if(imageFile.exists()){
                return BitmapFactory.decodeFile(imageFile.getAbsolutePath());
            }else {
                return null;
            }
        }
    });
} catch (JSONException e) {
    e.printStackTrace();
}

如果是本地动画图片资源,为了让 Lottie 找到图片资源需要如下的配置

animationView.setImageAssetsFolder("/images/");

上面代码的设置原理是什么地方呢,最终的核心代码在 lottie 库的 LottieAssetManager 类

#bitmapForId

  @Nullable
  Bitmap bitmapForId(String id) {
    Bitmap bitmap = bitmaps.get(id);
    if (bitmap == null) {
      LottieImageAsset imageAsset = imageAssets.get(id);
      if (imageAsset == null) {
        return null;
      }
      if (delegate != null) {
        bitmap = delegate.fetchBitmap(imageAsset);
        if (bitmap != null) {
          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;
  }

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue contains Java examples for Lottie network JSON animations, image assets, and the LottieAssetManager#bitmapForId path. First locate the blog entry or source file where this material belongs and review its surrounding format. Done means the explanation and examples are integrated into the blog with the referenced behavior clearly documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, java
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.