Android 如何使用 Lottie 提供多张图片

Question

我正在开发一个带有 Lottie 动画的应用程序。其中一个lottie动画需要两个图片文件(img_0.png, img1_.png).

例如，

lottie json file [ data.json ] : {"v":"5.1.7","fr":60,"ip":0,"op":120,"w":180,"h":200,"nm":"2","ddd":0,"assets":[{"id":"image_0","w":96,"h":96,"u":"images/","p":"img_0.png"},{"id":"image_1","w":180,"h":180,"u":"images/","p":"img_1.png"}],....

我无法在 main/assets 文件夹中为 LottieAnimationView 准备所有图像，因此我使用“setImageAssetDelegate”方法从 URL 异步获取多个图像。

这是我的代码：

        Glide.with(this)
            .asBitmap()
            .load("https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png")
            .into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(final Bitmap resource, Transition<? super Bitmap> transition) {

                    LottieAnimationView lottie = findViewById(R.id.lottie);
                    lottie.setImageAssetDelegate(new ImageAssetDelegate() {
                        @Override
                        public Bitmap fetchBitmap(LottieImageAsset asset) {
                            return resource;
                        }
                    });
                    lottie.playAnimation();
                }
            });

但是如果我使用“setImageAssetDelegate”方法，我只能将一张图片放到Lottie。我想在一个 Lottie 动画中放置多个不同的图像。

我不想要这个。（上面的代码显示了这个动画）。

我需要使用“setImageAssetDelegate”方法。

有人对此有任何想法吗？

Answer 1

异步获取图像将不起作用。 ImageAssetDelegate 是动画播放时需要的 "provider" 个图像。

它的方法 public Bitmap fetchBitmap(LottieImageAsset asset) 将在动画播放时为动画中的每个图像调用，您有责任提供正确的图像，其中传递给该方法的 LottieImageAsset 将提供您可以从动画 json 文件中获取当时需要的图像的详细信息。

您可以使用 Glide 来获取这些图像，但请记住，您必须同步获取它们，并且在您加载/提供该图像之前动画不会继续播放。

一个例子：

LottieAnimationView lottie = findViewById(R.id.lottie);
lottie.setImageAssetDelegate(new ImageAssetDelegate() {
    @Override
    public Bitmap fetchBitmap(LottieImageAsset asset) {
        return Glide.loadSychronous("http://" + asset.getId + ".png");
    }
});
lottie.playAnimation();

注意：这是伪代码，您必须查找如何使用 Glide 同步加载图像，并且您必须想出一种方法将图像 ID 与正确的匹配图片 url。

另一种方法是使用 Glide 加载所有动画所需的图像，保存它们（在内存或外部存储器中）然后才开始播放动画;这可能适用于小动画；对于任何更大的东西，你运行都会遇到麻烦，因为 a.加载所有图像花费的时间太长或 b。你运行内存不足。

Answer 2

这就是您将图像动态加载到 lottie 中的方法。在这个例子中，我通过 URL 加载。您也可以类似地加载捆绑图像。

Glide.with(this)
            .asBitmap()
            .load(url)
            .into(object : CustomTarget<Bitmap>(){
                override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                    lottie.addLottieOnCompositionLoadedListener {
                        val scaledBitmap = Bitmap.createScaledBitmap(resource, 282, 167, false)
                        lottie.updateBitmap("image_0", scaledBitmap)
                    }
                }
                override fun onLoadCleared(placeholder: Drawable?) {
                }
            })

image_0 是你要在 lottie json 中“assets”对象下替换的图像的 id。您也可以对 image_1 重复此过程。

"assets": [{
    "id": "image_0",
    "w": 282,
    "h": 167,
    "u": ""}]

缩放位图是可选的。

Android 如何使用 Lottie 提供多张图片

How to provide multiple images with Lottie on Android

android

lottie