HarmonyOS鸿蒙Next中lottie动画加载在aboutToAppear可以加载，在onpageshow无法加载动效

HarmonyOS鸿蒙Next中lottie动画加载在aboutToAppear可以加载，在onpageshow无法加载动效

lottie动画加载在aboutToAppear可以加载，在onpageshow无法加载动效，现在就是第一次进入可以加载，返回在进入就没有动效，json静态是有的，麻烦大佬看一下
@Component
export struct LottieAnimation {
  // 接收父组件传递的状态参数
  @Prop hasDiscoveredDevices: boolean;

  private politeChickyController: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  private politeChicky: string = 'lottie_device_link';
  private politeChickyPath: string = 'resources/rawfile/lottie_device_link.json';
  private animateItem: AnimationItem | undefined = undefined;

  aboutToAppear(): void {
    // 确保动画在组件准备好后播放
    this.animateItem?.play();
  }
  
  onPageShow(): void {
    this.animateItem?.play();
  }

  aboutToDisappear(): void {
    // 清理动画资源
    if (this.animateItem) {
      this.animateItem.destroy();
      this.animateItem = undefined;
    }
  }

  private initAnimation() {
    // 避免重复初始化
    if (this.animateItem) return;

    this.animateItem = lottie.loadAnimation({
      container: this.politeChickyController,
      renderer: 'canvas',
      loop: true,
      autoplay: true,
      name: this.politeChicky,
      path: this.politeChickyPath,
      initialSegment: [FRAME_START, FRAME_END]
    });
  }

  build() {
    Stack() {
      Canvas(this.politeChickyController)
        .width(300)
        .height(80)
        .borderRadius(10)
        .onReady(() => {
          this.initAnimation();
        })

      // 根据hasDiscoveredDevices状态显示不同文本
      Text(this.hasDiscoveredDevices ? "选择要连接的设备" : "正在扫描设备")
        .fontColor("#F2F2F2")
        .fontSize(14)
        .margin({ top: 5 })
    }
    .width(300)
    .height(80)
  }
}

更多关于HarmonyOS鸿蒙Next中lottie动画加载在aboutToAppear可以加载，在onpageshow无法加载动效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看代码应该是回来的时候没有触发onPageShow吧

更多关于HarmonyOS鸿蒙Next中lottie动画加载在aboutToAppear可以加载，在onpageshow无法加载动效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，Lottie动画在aboutToAppear能加载但onPageShow无法加载，是因为页面生命周期差异导致。aboutToAppear在页面构建时触发，此时动画组件已完成初始化。onPageShow在页面显示后触发，可能因组件未就绪或资源未绑定而失效。需检查动画资源加载时机及页面状态管理。

问题可能在于动画资源的生命周期管理。在aboutToDisappear中销毁了动画实例，但返回页面时onPageShow尝试播放的animateItem已被置为undefined，而initAnimation仅在Canvas的onReady中触发，导致二次进入时未重新初始化。

建议在onPageShow中检查动画实例是否存在，若不存在则重新初始化。可调整如下：

onPageShow(): void {
  if (!this.animateItem) {
    this.initAnimation();
  } else {
    this.animateItem.play();
  }
}

同时确保aboutToDisappear中的销毁逻辑仅在需要时执行，避免过度清理。

回到顶部