【问题标题】:Dynamically replace Image in Lottie animation at runtime在运行时动态替换 Lottie 动画中的 Image
【发布时间】:2021-11-10 23:53:52
【问题描述】:

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

问题从这里开始 --> 在运行时,用我项目中的图像替换那个“正方形”。因为这个图像可能会发生变化,所以我无法将它静态添加到我的 AE 动画中,因此需要在运行时动态添加它。几乎没有关于如何在 Android 中执行此操作的信息?

【问题讨论】:

    标签: android lottie


    【解决方案1】:

    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..

    【讨论】:

      【解决方案2】:

      Lottie 有一个XML 属性app:lottie_imageAssetsFolder,也可以在运行时设置:animationView.setImageAssetsFolder("images/");。使用该集合,可以参考json 中的图像。这是在线记录的;请参见 #599 和 #630 行上方的 cmets。 documentation 也对此进行了解释(src/assets 可能不是一个选项,因为它不可写):

      有时,您没有将图像与设备捆绑在一起。您可以这样做以节省 apk 中的空间,或者如果您从网络下载动画。要处理这种情况,您可以在LottieAnimationViewLottieDrawable 上设置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;
          }
      });
      

      【讨论】:

      • 谢谢马丁!不过,我需要问一下,这里的“downloadedBitmap”会是什么?谢谢
      • “dowloadedBitmap”是否是我需要创建的位图(我想在运行时引导的外部图像,转换为位图?),或者这将如何工作?谢谢!
      【解决方案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);
      

      这适用于一个图像,现在我将看看如何在运行时替换多个图像。

      【讨论】:

      • 你找到在运行时替换多个图像的解决方案了吗?
      【解决方案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 是您要在“assets”对象下的 lottie json 中替换的图像的 id。

      缩放位图是可选的。

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

      【讨论】:

        猜你喜欢
        • 2020-03-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-05-12
        • 1970-01-01
        • 1970-01-01
        • 2019-11-30
        • 2019-01-04
        相关资源
        最近更新 更多