HarmonyOS 鸿蒙Next中Canvas加载Lottie动画时不显示

HarmonyOS 鸿蒙Next中Canvas加载Lottie动画时不显示 Lottie动画组件官方示例:

cke_2707.png在预览器里能加载:

cke_5332.png

在模拟器里无法显示:

cke_10325.png

模拟器日志为:

cke_15637.png有谁能帮忙解决一下问题出在哪里?[抱拳][抱拳][抱拳]


更多关于HarmonyOS 鸿蒙Next中Canvas加载Lottie动画时不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

【解决方案】

开发者您好，把entry目录下的build-profile.json5文件里的resOptions字段注释 或者将copyCodeResource- enable改为true即可加载
参考文档：copyCodeResource说明

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


不会不显示

在HarmonyOS Next中，Canvas加载Lottie动画不显示，可能涉及以下原因：

  1. 资源文件问题：Lottie动画JSON文件可能未正确放置在resources/rawfile目录下，或文件路径引用错误。
  2. 组件属性配置：Canvas组件的宽高可能未设置或设置为0，导致渲染区域不可见。
  3. 动画状态控制：未调用play()方法启动动画，或动画控制器未正确初始化。
  4. 兼容性：Lottie动画文件可能使用了HarmonyOS Next暂不支持的AE特性。

请检查资源路径、组件尺寸及动画播放逻辑。

根据您提供的日志信息，关键错误是 [OpenGL]ERROR:GL_INVALID_OPERATION : glDrawArrays: Source and destination textures are the same.。

这是一个典型的OpenGL渲染错误，表明在Canvas上绘制Lottie动画时，源纹理和目标纹理相同，导致渲染冲突。在HarmonyOS Next的Canvas中直接渲染Lottie动画时，如果处理不当，容易出现此问题。

主要原因与解决方案：

  1. Canvas渲染上下文冲突：Lottie动画的渲染器可能直接使用了Canvas的上下文进行绘制，而Canvas自身也可能在同时进行绘制操作，导致纹理目标冲突。

    • 建议：确保Lottie动画的渲染与Canvas的其他绘制操作分离。可以尝试在单独的离屏Canvas或特定的渲染层中处理Lottie动画，再将其绘制到主Canvas上。

  2. Lottie动画资源或渲染循环问题：动画资源可能在模拟器环境中加载或解析方式与预览器不同，或者在渲染循环中重复绑定同一纹理。

    • 建议：检查Lottie JSON文件是否完全兼容，并确保动画的渲染启动（play()）时机正确，避免在Canvas每次重绘时重复初始化或绑定纹理。

  3. 模拟器与预览器的环境差异：预览器可能使用软件模拟渲染，而模拟器更接近真机的GPU硬件加速环境，对OpenGL的错误处理更严格。

    • 建议：在代码中确保Canvas的渲染逻辑（尤其是纹理绑定与绘制调用）符合OpenGL ES规范，避免自引用纹理操作。

快速排查步骤：

  • 检查Canvas的尺寸和Lottie动画的尺寸是否有效（非零）。
  • 验证Lottie动画文件路径在模拟器中可访问。
  • 尝试在Canvas的onReady回调之后再启动Lottie动画播放。
  • 考虑使用XComponent或Web组件作为替代方案加载Lottie，以绕过Canvas的底层渲染问题。

此问题通常需要调整Canvas与Lottie的集成方式，确保渲染目标分离。

回到顶部