鸿蒙使用lottile加载json动画

import { util } from "@kit.ArkTS";
import Lottie from "@ohos/lottie";

@Builder
export function tripletLottie() {
  One_click_triple_connection()
}

@ComponentV2
export struct One_click_triple_connection {
  private mLottieData: object | null = null;
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  // 初始化一个2D画布上下文，传入渲染设置
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

  aboutToAppear(): void {
    const ctx = getContext(this)
    // 获取二进制数据
    const uint8Array = ctx.resourceManager.getRawFileContentSync('triple_connect.json') //rawfile文件下存放json文件名称
    // 实例化文本解析工具
    const textDecoder = new util.TextDecoder()
    // 解析文本
    const jsonStr = textDecoder.decodeToString(uint8Array) // API12+
    // 转成对象
    this.mLottieData = JSON.parse(jsonStr)

  }

this.anim?.setDirection(1｜-1) // 设置动画正序倒序播放

  build() {
    Column() {
      Canvas(this.canvasRenderingContext)
        .width(300) // 设置画布宽度为300像素
        .height(100) // 设置画布高度为300像素
        .backgroundColor(Color.Gray) // 设置画布背景色为灰色
        .onReady(() => { //画布渲染成功加载json动画，使用完需要及时销毁不然浪费性能
          Lottie.loadAnimation({
            // 设置动画渲染容器为画布上下文
            container: this.canvasRenderingContext,

            // 使用canvas渲染模式
            renderer: 'canvas',

            // 动画是否循环播放
            loop: true,

            // 动画是否自动播放
            autoplay: false,

            // 动画实例的名称
            name: 'triple_connect',

            // 设置动画内容的缩放模式为“包含”
            contentMode: 'Contain',

            // JSON动画文件的路径
            // path: "common/AndroidWave.json", 

            animationData: this.mLottieData, //解析后的json 
            //uri：’http：/‘   //网络路径较大文件建议先下载至沙箱再读去
            // 设置动画的帧率为60帧每秒
            frameRate: 60,
            // （注释掉）设置动画播放的起始帧和结束帧
            // initialSegment: [0, 100],

          }).resize()
          Lottie.play('triple_connect')
        })
    }
  }
}