HarmonyOS 鸿蒙Next中如何解决Lottie首次加载动画失败

【问题现象】

加载Lottie动画时会出现第一次加载动画无效。

【背景知识】

Lottie是一个适用于Open Harmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。

【定位思路】

动画文件加载分为以下阶段：导入三方库->确认相关资源文件路径->使用Lottie导入动画->渲染，可以根据以上4个阶段进行逐步排查。

【解决方案】

• 是否配置依赖：

  "dependencies": {
    "[@ohos](/user/ohos)/lottie": "^2.0.11-rc.5"
  }
  

  检查发现版本不正确，需升级Lottie版本高于2.0.11-rc.5。

• 检查images文件夹是否已经放置到rawfile目录下。

• 检查data.json所在目录：

  將动画需要的json文件放到pages同级别目录下，然后引用。（json路径为entry/src/main/ets/common/lottie/data.json）。

注意

json文件路径不能使用 ./ 或者 …/ 等相对路径，相对路径获取不到动画源数据，会导致动画加载不出来，传递给loadAnimation 方法的路径是相对于pages父文件夹为基准的，而index页面内引入的相对路径的动画是以index.ets文件为基准的，两者基准不一致。

所以如果json文件放置在pages文件夹下，路径应为 ‘pages/common/data.json’ 样式。

private path:string = "common/lottie/data.json"

或

private jsonData:string = {"v":"4.6.6","fr":24,"ip":0,"op":72,"w":1000,"h":1000,"nm":"Comp 2","ddd":0,"assets":[],...}

【总结】

使用Lottie三方库时需要注意依赖配置以及相关文件路径是否为绝对路径等问题。