HarmonyOS 鸿蒙Next中lottie动画的图片资源无法加载

HarmonyOS 鸿蒙Next中lottie动画的图片资源无法加载以下为测试代码

private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
private animateName: string = "animate"
private animatePath: string = "common/lottie/nodevice_data.json"
private imagePath: string = 'common/lottie/images'
private animateItem?: AnimationItem

@Builder
animationView() {
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    Canvas(this.controller)
      .width('100%')
      .height('100%')
        // .backgroundColor('#0D9FFB')
      .onReady(() => {
        console.log('canvas onAppear');
        this.animateItem = lottie.loadAnimation({
          container: this.controller,
          renderer: 'canvas',
          loop: true,
          autoplay: true,
          name: this.animateName,
          path: this.animatePath,
          imagePath: this.imagePath,
        })
      })

    Button('load animation')
      .onClick(() => {
        if (this.animateItem != null) {
          this.animateItem.destroy()
          // this.animateItem = null
        }
        this.animateItem = lottie.loadAnimation({
          container: this.controller,
          renderer: 'canvas',
          loop: true,
          autoplay: true,
          name: this.animateName,
          path: this.animatePath,
          initialSegment: [10, 50],
        })
      })

    Button('destroy animation')
      .onClick(() => {
        lottie.destroy(this.animateName)
        // this.animateItem = null
      })
  }
  .width('100%')
  .height('100%')
}

vueper 1楼

参考demo：https://gitee.com/openharmony-tpc/lottieArkTS

参考demo，把images文件夹放置到rawfile目录下，ets下创建lottie文件夹存nodevice_data.json

import lottie, { AnimationItem } from '@ohos/lottie';

@Entry
@Component
struct Index {
  @State message: string = '动画页面';
  private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
  private animateName: string = "animate"
  private animatePath: string = "lottie/nodevice_data.json";
  private animateItem: AnimationItem = lottie.loadAnimation({
    container: this.controller,
    renderer: 'canvas',
    loop: true,
    autoplay: true,
    name: this.animateName,
    path: this.animatePath,
  });

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Canvas(this.controller)
        .width('100%')
        .height('100%')
        .backgroundColor('#0D9FFB')
        .onReady(() => {
          console.log('canvas onAppear');
          this.animateItem = lottie.loadAnimation({
            container: this.controller,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            name: this.animateName,
            path: this.animatePath,
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

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

htzhanglong 2楼

在HarmonyOS鸿蒙Next中，Lottie动画的图片资源无法加载可能涉及多个方面。首先，检查图片资源的路径是否正确，确保资源文件已正确放置在项目的resources目录下，并且路径在代码中引用无误。其次，确认图片资源的格式和尺寸是否符合Lottie动画的要求，通常支持PNG、JPG等常见格式。第三，检查Lottie动画的JSON文件是否正确引用了图片资源，确保assets字段中的路径与项目中的资源路径一致。第四，确认项目的资源打包配置是否正确，确保图片资源在编译时被正确打包到应用中。最后，检查Lottie库的版本是否与鸿蒙Next系统兼容，确保使用的是最新或兼容的版本。如果以上步骤均无误，问题可能出在系统的资源管理机制或Lottie库的特定实现上，需要进一步调试或查阅相关文档。

phonegap100 3楼

在HarmonyOS鸿蒙Next中，Lottie动画的图片资源无法加载，可能是以下原因导致的：

资源路径错误：请检查图片资源的路径是否正确，确保其在项目中正确引用。
资源未打包：确认图片资源已正确打包到应用中，未遗漏在构建过程中。
权限问题：确保应用有访问图片资源的权限，特别是在涉及外部存储时。
Lottie版本兼容性：检查Lottie库的版本是否与HarmonyOS鸿蒙Next兼容，考虑更新或降级Lottie库。
缓存问题：尝试清除应用缓存或重新安装应用，确保资源加载无干扰。
代码问题：检查Lottie动画的加载代码，确保无逻辑错误或资源加载方式不当。

通过以上步骤，应能解决Lottie动画图片资源无法加载的问题。如问题依旧，建议查阅HarmonyOS官方文档或社区支持获取更多帮助。