HarmonyOS 鸿蒙Next lottie组件无法正常播放动画

建议更新到最新版本，再给你个demo参考一下：

import lottie, { AnimationItem } from '[@ohos](/user/ohos)/lottie'
import { BusinessError } from '[@ohos](/user/ohos).base';
import window from '[@ohos](/user/ohos).window';
import { common } from '@kit.AbilityKit';
[@Entry](/user/Entry)()
[@Component](/user/Component)
struct LottiePage {
  // 构建渲染上下文
  private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private mainCanvasRenderingContext: CanvasRenderingContext2D =
    new CanvasRenderingContext2D(this.mainRenderingSettings)
  [@State](/user/State) message: string = 'pages/lottie/LottiePage';
  private animateItem: AnimationItem | null = null;
  animateName: string = 'loading22'
  windowClass: window.Window | undefined = undefined;
  context = getContext(this) as common.UIAbilityContext
  aboutToAppear(): void {
    let config: window.Configuration = {
      name: "test",
      windowType: window.WindowType.TYPE_DIALOG,
      ctx: this.context
    };
    try {
      window.createWindow(config, (err: BusinessError, data) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to create the window. Cause: ' + JSON.stringify(err));
          return;
        }
        this.windowClass = data;
        console.info('Succeeded in creating the window. Data: ' + JSON.stringify(data));
        this.windowClass.resize(500, 1000);
      });
    } catch (exception) {
      console.error('Failed to create the window. Cause: ' + JSON.stringify(exception));
    }
  }
  build() {
    Column({ space: 15 }) {
      /**
       * 注意：canvas设置的宽高比例建议和动画json资源里面的宽高比例一致，
       * 如：json动画资源里的宽高比例是 1:2 ，则canvas设置的宽高也是 1:2
       */
      Canvas(this.mainCanvasRenderingContext)
        .width(110)
        .height(140)//.backgroundColor(Color.Gray)
        .onReady(() => {
          //抗锯齿的设置
          this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
          this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium'
          this.animateItem?.destroy(this.animateName)
          this.animateItem = lottie.loadAnimation({
            container: this.mainCanvasRenderingContext, // 渲染上下文
            renderer: 'canvas', // 渲染方式
            loop: true, // 是否循环播放,默认true
            autoplay: false, // 是否自动播放，默认true
            name: this.animateName, // 动画名称
            // path 参数：只支持加载entry/src/main/ets 文件夹下的相对路径，不支持跨包查找文件
            // path 参数和 animationData 参数，二者选其一
            path: 'lottie/data2.json',
          })
        })
      Row({ space: 10 }) {
        Button('点击播放')
          .onClick(() => {
            // emitter.emit('10010')
            this.animateItem?.play()
          })
        Button('点击暂停')
          .onClick(() => {
            this.animateItem?.pause()
          })
        Button('点击停止')
          .onClick(() => {
            this.animateItem?.pause()
          })
      }
      Row({ space: 10 }) {
        Button('速度')
          .onClick(() => {
            this.animateItem?.setSpeed(1)
          })
        Button('获取时长')
          .onClick(() => {
            let time = this.animateItem?.getDuration();
            console.log('lottie', time?.toString())
          })
      }
    }
    .width('100%')
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>