HarmonyOS lottie框架问题

lottie框架自定义了一个动画，放到了某个界面中，需要一进入就开始加载动画，但是大部分情况下进去界面的时候加载不出来动画，偶尔进去能加载出来。不知道是不是动画还没有初始化好的原因？

import lottie from '@ohos/lottie';
import { AnimationItem } from '@ohos/lottie';
import util from '@ohos.util';
import common from '@ohos.app.ability.common';

@Component
export struct ProgressBar {
  @State message: string = 'progressBar'
  @State viewWidth:number = 40
  @State viewHeight:number = 40
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
  private animateItem: AnimationItem | null = null;
  private mLottieData: object | null = null;
  private animateName: string = "LoadingProgress";

  loadView() {
    if (this.mLottieData != null && this.animateItem == null) {
      let contexts = getContext(this).createModuleContext('commonUi') as common.UIAbilityContext
      this.animateItem = lottie.loadAnimation({
        container: this.canvasRenderingContext,
        renderer: 'canvas', // canvas 渲染模式
        loop: true,
        autoplay: true,
        context: contexts,
        name: this.animateName,
        animationData: this.mLottieData,
      })
    }
  }

  async aboutToAppear() {
    let resStr = util.TextDecoder.create('utf-8', { ignoreBOM: true })
    let context = getContext(this).createModuleContext('commonUi') as common.UIAbilityContext
    context.resourceManager.getRawFileContent('jiazai_slow_data.json', (err: Error, data: Uint8Array) => {
      if (data === null || data === undefined || data.buffer === undefined) {
        return;
      }
      let lottieStr = resStr.decodeWithStream(new Uint8Array(data.buffer));
      this.mLottieData = JSON.parse(lottieStr);
      this.loadView()
    })
  }

  build() {
    Canvas(this.canvasRenderingContext)
      .width(this.viewWidth)
      .height(this.viewHeight)
      .backgroundColor(Color.Transparent)
      .onReady(() => {
        // 可在此生命回调周期中加载动画，可以保证动画尺寸正确
        this.loadView()
      })
      .onDisAppear(() => {
        lottie.destroy(this.animateName);
      })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.