运行时动态替换 Lottie 动画中的 Image

Question

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

问题从这里开始 --> 在运行时，将 "square" 替换为我项目中的图像。因为这个图像可能会改变，所以我无法将它静态添加到我的 AE 动画中，所以需要在运行时动态添加它。 Android 中几乎没有关于如何做到这一点的信息？

Answer 1

Lottie 有一个 XML 属性 app:lottie_imageAssetsFolder，也可以在运行时设置：animationView.setImageAssetsFolder("images/");。使用该集合，可以参考 json 中的图像。这是在线记录的；请参阅 #599 and #630. this is also explained in the documentation 行上方的注释（src/assets 可能不是一个选项，因为它不可写）：

Sometimes, you don't have the images bundled with the device. You may do this to save space in your apk or if you downloaded the animation from the network. To handle this case, you can set an ImageAssetDelegate on your LottieAnimationView or LottieDrawable. The delegate will be called every time Lottie tries to render an image. It will pass the image name and ask you to return the bitmap. If you don't have it yet (if it's still downloading, for example) then just return null and Lottie will continue to ask on every frame until you return a non-null value.

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;
    }
});

Answer 2

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

因此，您可以在 LottieAnimationView 上设置图像，就像在 ImageView

上设置图像一样

例如：

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

这只是一个示例，说明如何使用相同的视图来播放动画（json 文件）或像任何 ImageView..

一样的图像

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);

这适用于一张图片，现在我将了解如何在运行时替换多张图片。

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?) {
                }
            })

image_0 是你要在 lottie json 中“assets”对象下替换的图像的 id。

缩放位图是可选的。

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

运行时动态替换 Lottie 动画中的 Image

Dynamically replace Image in Lottie animation at runtime

android

lottie