HarmonyOS鸿蒙Next中关于lottie的问题，设置抗锯齿的什么报错，怎么解决呢

HarmonyOS鸿蒙Next中关于lottie的问题，设置抗锯齿的什么报错，怎么解决呢

import lottie, { AnimationItem } from '@ohos/lottie'; // 导入Lottie动画库及其AnimationItem类型

@Entry // 装饰器，标记为页面入口
@Component // 装饰器，定义为一个组件
struct Index {
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);

  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

  private animateItem: AnimationItem | null = null;

  private animateName: string = "animation"; // 定义动画的名称

  aboutToDisappear(): void {
    console.info('aboutToDisappear'); // 打印日志，表示页面即将销毁
    this.destroy(); // 调用销毁方法清理动画资源
  }

  build() {
    Column() { // 使用垂直线性布局
      Row() { // 使用水平线性布局
        // 关联画布组件
        Canvas(this.canvasRenderingContext)
          .width(300) // 设置画布宽度为300像素
          .height(300) // 设置画布高度为300像素
          .backgroundColor(Color.Gray) // 设置画布背景色为灰色
          .onReady(() => {
            if (this.animateItem != null) {
              // 如果动画实例已存在，调整动画尺寸
              this.animateItem?.resize();
            } else {
              // 如果动画实例不存在，初始化画布设置并加载动画
              // 开启画布的图像平滑处理（抗锯齿）
              this.canvasRenderingContext.imageSmoothingEnabled = true;

              this.canvasRenderingContext.imageSmoothingQuality = 'low';
              // 设置平滑处理的质量为中等

              this.loadAnimation(); // 调用加载动画的方法
            }
          })
      }

      // 控制按钮区域
      Row() { // 使用水平线性布局
        Button('播放') // 播放按钮
          .onClick(() => {
            // 点击事件回调
            if (this.animateItem) {
              // 如果动画实例存在，播放动画
              this.animateItem.play();
            }
          })
        Button('暂停') // 暂停按钮
          .onClick(() => {
            // 点击事件回调
            if (this.animateItem) {
              // 如果动画实例存在，暂停动画
              this.animateItem.pause();
            }
          })
        Button('停止') // 停止按钮
          .onClick(() => {
            // 点击事件回调
            if (this.animateItem) {
              // 如果动画实例存在，停止动画
              this.animateItem.stop();
            }
          })
      }
    }
  }

  // 加载动画的方法
  loadAnimation() {
    this.animateItem = lottie.loadAnimation({
      // 设置动画渲染容器为画布上下文
      container: this.canvasRenderingContext,

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

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

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

      // 动画实例的名称
      name: this.animateName,

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

      // JSON动画文件的路径
      path: 'common/edushu_loading.json',

      // 设置动画的帧率为60帧每秒
      frameRate: 60,

      // （注释掉）设置动画播放的起始帧和结束帧
      // initialSegment: [0, 100],
    });

    // 动画是异步加载的，需要在加载完成回调里对动画进行操作
    this.animateItem.addEventListener('DOMLoaded', (args: Object): void => {
      // 当动画DOM加载完成时触发事件
      // （注释掉）修改动画的颜色为红色
      // this.animateItem?.changeColor([255, 0, 0, 1]);

      // 动画加载完成后自动播放
      this.animateItem?.play();
    });
  }

  // 销毁动画实例并释放资源的方法
  destroy() {
    console.log("destroy"); // 打印日志，表示动画资源销毁

    // 移除动画的加载完成事件监听器
    this.animateItem?.removeEventListener("DOMLoaded");

    // 销毁指定名称的动画实例
    lottie.destroy(this.animateName);

    // 将动画实例变量置为null，释放内存
    this.animateItem = null;
  }
}

lottie的资源文件我是放在ets下和pages的同级目录common中的，但是就会直接卡退，有没有知道怎么做的大佬呢