HarmonyOS 鸿蒙Next 如何实现lottie加载json动画

import lottie, { AnimationItem } from '@ohos/lottie';

@Entry
@Component
struct Index {
  // 构建上下文
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
  private renderingSettings1: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRenderingContext1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings1)
  private renderingSettings2: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRenderingContext2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings2)
  private animateItem: AnimationItem | null = null;
  private animateItem1: AnimationItem | null = null;
  private animateItem2: AnimationItem | null = null;

  // 页面销毁时释放动画资源
  aboutToDisappear(): void {
    console.info('aboutToDisappear');
    lottie.destroy();
  }

  build() {
    Column() {
      Row() {
        // 关联画布
        Canvas(this.canvasRenderingContext)
          .width(50)
          .height(50)
          .backgroundColor(Color.Gray)
          .onReady(() => {
            // 加载动画
            this.animateItem?.resize();
          })
        Canvas(this.canvasRenderingContext1)
          .width(50)
          .height(50)
          .backgroundColor(Color.Gray)
          .onReady(() => {
            // 加载动画
            this.animateItem1?.resize();
          })
        Canvas(this.canvasRenderingContext2)
          .width(50)
          .height(50)
          .backgroundColor(Color.Gray)
          .onReady(() => {
            // 加载动画
            this.animateItem2?.resize();
          })
      }

      Button('点赞')
        .onClick(() => {
          lottie.destroy('2016')
          this.animateItem = lottie.loadAnimation({
            container: this.canvasRenderingContext,
            renderer: 'canvas', // canvas 渲染模式
            loop: true,
            autoplay: true,
            name: '点赞',
            contentMode: 'Contain',
            path: "common/lottie/test.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
            // path: "common/lottie/data_rawfile.json"
            // path: "common/lottie/data_base64.json"
          })

          this.animateItem1 = lottie.loadAnimation({
            container: this.canvasRenderingContext1,
            renderer: 'canvas', // canvas 渲染模式
            loop: true,
            autoplay: true,
            name: '点赞',
            contentMode: 'Contain',
            path: "common/lottie/test1.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
            // path: "common/lottie/data_rawfile.json"
            // path: "common/lottie/data_base64.json"
          })

          this.animateItem2 = lottie.loadAnimation({
            container: this.canvasRenderingContext2,
            renderer: 'canvas', // canvas 渲染模式
            loop: true,
            autoplay: true,
            name: '点赞',
            contentMode: 'Contain',
            path: "common/lottie/test2.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
            // path: "common/lottie/data_rawfile.json"
            // path: "common/lottie/data_base64.json"
          })
        })

      Button('销毁').onClick(() => {
        this.destroy();
      })
    }

  }

  destroy() {
    if (this.animateItem != null) {
      this.animateItem = null;
    }
    if (this.animateItem1 != null) {
      this.animateItem1 = null;
    }
    if (this.animateItem2 != null) {
      this.animateItem2 = null;
    }
    lottie.destroy();
  }

}

json动画文件放在模块的src/main/ets/common/lottie/路径下