在运行时动态替换Lottie动画中的图像

Question

我有一个After Effects动画，非常简单，是一个正方形在移动（AE形状）。我使用Bodymovin将动画导出为.json文件，并在我的项目中使用Lottie添加json文件。到目前为止，一切都很好。

问题出现在这里-> 在运行时，需要用项目中的图像替换该“正方形”。由于此图像可能会更改，因此无法静态地将其添加到AE动画中，因此需要在运行时动态添加它。在Android上几乎没有关于如何做到这一点的信息？

- mavesonzini

---

你能提供相关的JSON文件吗？我正在尝试构建类似的东西，但似乎Lottie JSON文件没有正确导出。 - Gerardo Suarez

Answer 1

LottieAnimationView 扩展了 ImageView。换句话说，LottieAnimationView 也是一个 ImageView。

因此，您可以像为 ImageView 设置图像一样设置 LottieAnimationView 上的图像。

例如：

if (isAnimated) {
    mLottieView.setAnimation("<json file name from asset folder>");
} else {
    mLottieView.setImageResource(R.drawable.square_image);
}

这只是一个示例，展示如何使用相同的视图播放动画（json文件）或像任何ImageView一样显示图片。

- W0rmH0le

Answer 2

Lottie有一个XML属性 app:lottie_imageAssetsFolder ，也可以在运行时设置： animationView.setImageAssetsFolder("images/");。设置后，可以在json中引用图像。这在代码中有记录，参见第599行和第630行上方的注释。这也在documentation中解释（src/assets可能不是一个选项，因为它不可写入）：

有时候，设备上并没有捆绑图像。你可能会这样做来节省apk的空间，或者如果你从网络下载了动画。为了处理这种情况，你可以在你的LottieAnimationView或LottieDrawable上设置一个ImageAssetDelegate。每次Lottie尝试呈现图像时，都会调用委托。它将传递图像名称并要求你返回位图。如果你还没有它（例如，如果它仍在下载），则只需返回null，Lottie将继续在每一帧上询问直到你返回非null值。

animationView.setImageAssetDelegate(new ImageAssetDelegate() {
    @Override
    public Bitmap fetchBitmap(LottieImageAsset asset) {
        if (downloadedBitmap == null) {
            // We don't have it yet. Lottie will keep asking until we return a non-null bitmap.
           return null;
        }
        return downloadedBitmap;
    }
});

- Martin Zeitler

---

谢谢 Martin！不过我需要问一下，在这里的'downloadedBitmap'指的是什么？谢谢。 - mavesonzini

“downloadedBitmap” 是我需要创建的位图（运行时要加载的外部图像转换成位图？），还是这个功能的工作方式如何？谢谢！ - mavesonzini

Answer 3

我成功做到了这一点：问题在于我的After Effects动画具有矢量形状，而我正在尝试替换它。当我将原始动画更改为使用.png文件时，我可以在运行时替换图像。效果非常好。

// First I converted the png I wanted to see at runtime to a bitmap:

Bitmap bitmapImage = BitmapFactory.decodeResource(getResources(), R.drawable.imageBlah);

// I used the lambda: 

lottieAnimationView.setImageAssetDelegate( lottieImageAsset -> bitmapImage);

这个方法适用于单个图片，现在我要尝试替换多个图片。

- mavesonzini

---

你有没有找到替换多张图片的运行时解决方案？ - Nitin Bhanderi

你能提供相关的JSON文件吗？我正在尝试构建类似的东西，但似乎Lottie JSON文件没有正确导出。 - Gerardo Suarez

Answer 4

这是如何动态地将图片加载到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?) {
                }
            })

在“assets”对象下，image_0是您想要替换的图像的ID。

缩放位图是可选的。

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

- Harminder Singh

---

你能提供相关的JSON文件吗？我正在尝试构建类似的东西，但似乎Lottie JSON文件没有正确导出。 - Gerardo Suarez

如果加载的位图未显示，您可以尝试使用lottie.setImageBitmap(scaledBitmap)。 - oguzhan