HarmonyOS 鸿蒙Next中json格式的图片现在有支持展示了吗

HarmonyOS 鸿蒙Next中json格式的图片现在有支持展示了吗

3 回复

Image不支持JSON类型的图片格式，建议使用三方库Lottie。lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。

下载安装

ohpm install [@ohos](/user/ohos)/lottie

参考示例：

import lottie, { AnimationItem } from '[@ohos](/user/ohos)/lottie';

@Entry
@Component
struct Index {
  // 构建上下文
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);
  private animateItem: AnimationItem | null = null;
  private animateName: string = 'animation'; 

  // 页面销毁时释放动画资源
  aboutToDisappear(): void {
    console.info('aboutToDisappear');
    lottie.destroy();
  }

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

  loadAnimation() {
    this.animateItem = lottie.loadAnimation({
      container: this.canvasRenderingContext,
      renderer: 'canvas', // canvas 渲染模式
      loop: true,
      autoplay: false,
      name: this.animateName,
      contentMode: 'Contain',
      path: 'common/animation.json',
    })
    // 因为动画是异步加载，所以对animateItem的操作需要放在动画加载完成回调里操作
    this.animateItem.addEventListener('DOMLoaded', (args: Object): void => {
      this.animateItem.changeColor([225, 25, 100, 1]);
      this.animateItem.play();
    });
  }

  destroy() {
    this.animateItem.removeEventListener('DOMLoaded');
    lottie.destroy(this.animateName);
    this.animateItem = null;
  }
}

更多关于HarmonyOS 鸿蒙Next中json格式的图片现在有支持展示了吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，JSON格式的图片展示已通过PixelMap等原生方式支持。开发者可使用资源管理接口直接解析和渲染JSON中的图片数据，无需依赖外部库。系统组件如Image组件能够加载并显示这些图片资源，确保高效渲染。具体实现涉及ArkUI声明式开发范式和资源管理API，详细用法可查阅官方文档中关于媒体资源处理的部分。

截至目前，HarmonyOS Next 已支持通过 JSON 格式加载和展示图片。开发者可以使用 Image 组件，并通过 JSON 数据中的 URL 或资源路径设置图片源。例如，在声明式 UI 中，可以通过 $r 或网络链接直接绑定图片资源。此外，系统还支持动态更新 JSON 数据中的图片信息，并实时渲染到界面。建议参考官方文档中关于 Image 组件及数据绑定的具体用法，确保格式和路径正确。

回到顶部