HarmonyOS 鸿蒙Next lottie加载不出json动画

HarmonyOS 鸿蒙Next lottie加载不出json动画

lottie版本

"@ohos/lottie": "^2.0.16",

声明

private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
@State animateItem: AnimationItem | null = null;
@State animateName: string = "CopilotWind"; // 动画名称
@State animatePath: string = "common/lottie/animation.json"

Canvas(this.canvasRenderingContext)
  .width(this.displayInfo.getWidth(259))
  .height(this.displayInfo.getHeight(235))
  .onReady(() => {
    // 加载动画
    if (this.animateItem != null) {
      // 可在此生命回调周期中加载动画，可以保证动画尺寸正确
      this.animateItem?.resize();
    } else {
      // 抗锯齿的设置
      this.canvasRenderingContext.imageSmoothingEnabled = true;
      this.canvasRenderingContext.imageSmoothingQuality = 'medium'
      this.loadAnimation();
    }
  })

load方法

loadAnimation() {
  this.animateItem = lottie.loadAnimation({
    container: this.canvasRenderingContext,
    renderer: 'canvas', // canvas 渲染模式
    loop: true,
    autoplay: false,
    name: this.animateName,
    path: this.animatePath,
  })

  // 因为动画是异步加载，所以对animateItem的操作需要放在动画加载完成回调里操作
  this.animateItem.addEventListener('DOMLoaded', (args: Object): void => {
    if (this.getCarBean != null && FunManager.CopilotVentilate == 0 && this.selectedTabIndex == 0) {
      this.animateItem?.destroy(this.animateName)
    } else {
      this.animateItem?.play(this.animateName)
    }
  });
}

我的代码在components下，调用这个common中的lottie

现在发现不走addEventListener，但是我取消这个回调直接调用play，也不能够显示lottie，之前试过这样是好用的，不知道是版本的问题还是什么原因


更多关于HarmonyOS 鸿蒙Next lottie加载不出json动画的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复 
import lottie, { AnimationItem } from '@ohos/lottie';
import { common } from '@kit.AbilityKit';
import { util } from '@kit.ArkTS';

let jsonData = null

@Entry({ routeName: 'lottiePage' })
@Component
export struct LottiePage {
  @State message: string = '正在加载中......';
  private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings)
  private animateName = "loading"
  private contexts = getContext(this) as common.UIAbilityContext;
  private resStr = util.TextDecoder.create('utf-8', { ignoreBOM: true });
  private animateItem: AnimationItem | null = null

  onPageShow() {
    // loading.json需要放到lottie包下的rawfile中
    this.contexts.resourceManager.getRawFileContent('animation.json', async (err: Error, data: Uint8Array) => {
      if (data === null || data === undefined || data.buffer === undefined) {
        return;
      }
      let lottieStr = await this.resStr.decodeToString(new Uint8Array(data.buffer));
      jsonData = JSON.parse(lottieStr);
    })
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Canvas(this.controller)
        .width('30%')
        .height('20%')
        .backgroundColor('#0D9FFB')
        .onReady(() => {
          this.animateItem = lottie.loadAnimation({
            container: this.controller,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            context: this.contexts,
            name: this.animateName,
            animationData: jsonData
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

这样写试一下，将animation.json放到resources/rawfile文件下面

更多关于HarmonyOS 鸿蒙Next lottie加载不出json动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个可以，

import lottie, { AnimationItem } from ‘@ohos/lottie’

@Entry @Component struct Lottie { private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true) private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings) private animateName = “loading” // 此处的json文件是放在ets目录下的common文件夹下的lottie文件夹中， 切记不能是相对路径。如果放在pages目录下，路径应为’pages/common/data.json’ private animatePath = “common/lottie/animation.json” private animateItem: AnimationItem | null = null

build() { Column() { Text(‘初始化中…’).fontSize(18) Canvas(this.controller) .width(‘30%’) .height(‘20%’) .backgroundColor(’#0D9FFB’) .onReady(() => { this.animateItem = lottie.loadAnimation({ container: this.controller, renderer: ‘canvas’, loop: true, autoplay: true, name: this.animateName, path: this.animatePath, }) }) } .width(‘100%’) .height(‘100%’) .padding(12) } }

这样我这边试也是可以的

你的lottie是什么版本啊

2.0.13，

- 发布日期: 2023-03-15
- 版本号: 2.0.13
- 版本更新
  - 修复了一些已知问题。
  - 提升了系统稳定性。

你在else中打个断点，看看有没有执行 play

并没有，然后我不在回调里执行play后，直接play执行了，但也没显示出来。

针对HarmonyOS（鸿蒙）Next系统中Lottie加载不出JSON动画的问题，可能的原因及解决方案如下：

  1. 资源路径问题：

    • 确保JSON动画文件的路径正确无误。在鸿蒙系统中，资源路径需要严格遵守系统规范，检查路径中是否存在拼写错误或格式问题。

  2. 文件损坏：

    • 验证JSON动画文件是否完整且未损坏。可以尝试用其他工具打开该文件，检查其内容是否可读且格式正确。

  3. 依赖库版本：

    • 检查Lottie库版本是否与鸿蒙系统版本兼容。鸿蒙系统可能对第三方库有特定的要求或限制，确保使用的Lottie库版本符合系统要求。

  4. 权限问题：

    • 确保应用具有读取JSON动画文件所在目录的权限。在鸿蒙系统中，应用权限管理较为严格，需要确保应用已正确申请并获得了必要的权限。

  5. 系统Bug：

    • 如果以上均无误，可能是鸿蒙系统自身的Bug导致。此时，可以尝试更新系统到最新版本，看问题是否得到解决。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部