HarmonyOS 鸿蒙Next lottie重复加载失败

可能是绑定了同一个canvas对象，可以看看下面代码

import lottie, { AnimationItem } from '@ohos/lottie';
import { ComponentContent } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct LottiePage {
  canvas: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
  canvas2: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))

  private animateItem1: AnimationItem | null = null;
  private animateItem2: AnimationItem | null = null;
  private animateName: string = "animationName1";
  private animateName2: string = "animationName2";

  build() {
    Row() {
      Button('openLottieDialog').onClick(() => {
        let uiContext = this.getUIContext()
        let promptAction = uiContext.getPromptAction();

        let contentNode1 = 
          new ComponentContent(uiContext, wrapBuilder(buildLottie), new Params(this.canvas, this.loadAnimation));

        let contentNode2 = 
          new ComponentContent(uiContext, wrapBuilder(buildLottie), new Params(this.canvas2, this.loadAnimation2));

        try {
          promptAction.openCustomDialog(contentNode1, {
            isModal: false,
            onDidDisappear: () => {
              this.animateItem1!.removeEventListener("DOMLoaded");
              lottie.destroy(this.animateName);
              this.animateItem1 = null;
            }
          });

          promptAction.openCustomDialog(contentNode2, {
            isModal: false,
            onDidDisappear: () => {
              this.animateItem2!.removeEventListener("DOMLoaded");
              lottie.destroy(this.animateName2);
              this.animateItem2 = null;
            }
          });
        } catch (error) {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
        };
      })
    }
  }

  loadAnimation = () => {
    this.animateItem1 = lottie.loadAnimation({
      container: this.canvas,
      renderer: 'canvas', // canvas 渲染模式
      loop: true,
      autoplay: false,
      name: this.animateName,
      contentMode: 'Contain',
      path: "common/animation.json",
    })

    this.animateItem1.addEventListener('DOMLoaded', (args: Object): void => {
      this.animateItem1!.changeColor([225, 25, 100, 1]);
      this.animateItem1!.play()
    })
  }

  loadAnimation2 = () => {
    this.animateItem2 = lottie.loadAnimation({
      container: this.canvas2,
      renderer: 'canvas', // canvas 渲染模式
      loop: true,
      autoplay: false,
      name: this.animateName2,
      contentMode: 'Contain',
      path: "common/animation.json",
    })

    this.animateItem2.addEventListener('DOMLoaded', (args: Object): void => {
      this.animateItem2!.changeColor([225, 25, 100, 1]);
      this.animateItem2!.play()
    })
  }
}

@Builder
function buildLottie(param: Params) {
  Column() {
    // 关联画布
    Canvas(param.canvas)
      .width(200)
      .height(200)
      .backgroundColor(Color.Gray)
      .onReady(() => {
        param.loadAnimation();
      })
  }
  .backgroundColor(Color.Pink)
  .width(100)
  .height(100)
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
}

class Params {
  canvas: CanvasRenderingContext2D
  loadAnimation: () => void = () => {}

  constructor(canvas: CanvasRenderingContext2D, loadAnimation: () => void) {
    this.canvas = canvas;
    this.loadAnimation = loadAnimation;
  }
}