HarmonyOS 鸿蒙Next 用下面这段代码加载gif动图,为什么拿到的是静止图?

发布于 1周前 作者 songsunli 最后一次编辑是 5天前 来自 鸿蒙OS

代码如下(代码截取自官方示例https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-image-V13#%E7%A4%BA%E4%BE%8B2%E4%B8%8B%E8%BD%BD%E4%B8%8E%E6%98%BE%E7%A4%BA%E7%BD%91%E7%BB%9C%E5%9B%BE%E7%89%87):

[@State](/user/State) pixelMapImg: PixelMap | undefined = undefined;

  aboutToAppear() {
    this.requestImageUrl('https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20241217165311.93758235127923197058573067433607:50001231000000:2800:323D0060A0AB685F3E009950B115E3C619459B3DB6BF04B57820A69D7B90598A.gif?needInitFileName=true?needInitFileName=true');// 请填写一个具体的网络图片地址
  }

  requestImageUrl(url: string) {
    http.createHttp().request(url, (error: BusinessError, data: http.HttpResponse)=> {
      if (error) {
        console.error(`request image failed: url: ${url}, code: ${error.code}, message: ${error.message}`);
      } else {
        let imgData: ArrayBuffer = data.result as ArrayBuffer;
        console.info(`request image success, size: ${imgData.byteLength}`);
        let imgSource: image.ImageSource = image.createImageSource(imgData);
        class sizeTmp {
          height: number = 100
          width: number = 100
        }
        let options: Record<string, number | boolean | sizeTmp> = {
          'alphaType': 0,
          'editable': false,
          'pixelFormat': 3,
          'scaleMode': 1,
          'size': { height: 100, width: 100 }
        }
        imgSource.createPixelMap(options).then((pixelMap: PixelMap) => {
          console.error('image createPixelMap success');
          this.pixelMapImg = pixelMap;
        })
      }
    })
  }

  build() {
    Column({space:20}) {
      Image(this.pixelMapImg)
        .alt($r('app.media.startIcon'))
        // .objectFit(ImageFit.None)
        .width(200)
        .aspectRatio(1)

      Image('https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20241217165311.93758235127923197058573067433607:50001231000000:2800:323D0060A0AB685F3E009950B115E3C619459B3DB6BF04B57820A69D7B90598A.gif?needInitFileName=true?needInitFileName=true')
        .width(200)
        .aspectRatio(1)
    }
  }

更多关于HarmonyOS 鸿蒙Next 用下面这段代码加载gif动图,为什么拿到的是静止图?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复
你好,官方示例里面的pixelMap本身展示的就是静态图,而非gif图。你所看到下面的两张图片切换是因为先要展示.alt() 方法指定的图片。如果图片加载失败或尚未加载完成,浏览器或应用将会显示这个图片。当图片加载成功时,替代图片会被主图片覆盖,从而显示主图片。

更多关于HarmonyOS 鸿蒙Next 用下面这段代码加载gif动图,为什么拿到的是静止图?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我把官方案例里的图片地址改了,改成了一个gif图片,直接使用Image下载时有动画效果,通过requestImageUrl获取pixelMap时,没有动画效果,只展示了其中一帧。

希望HarmonyOS能继续推出更多实用的功能,满足用户的不同需求。

原来如此!

好的,谢谢提示。

在HarmonyOS鸿蒙Next中,加载GIF动图而得到静止图的问题,通常是因为图像加载或显示控件不支持动画格式。GIF作为一种常见的动画图片格式,其播放需要特定的控件或库支持。以下可能的原因及处理方式:

  1. 控件不支持:确保你使用的UI控件支持GIF动画播放。如果控件仅支持静态图片,GIF动画将无法正常显示。可以尝试使用支持动画的Image组件,如AnimatedImage(假设鸿蒙有此类组件,具体请参考官方文档)。

  2. 加载方式错误:检查GIF图片的加载方式是否正确。确保在资源加载或网络请求时,指定了正确的图片类型或格式,避免被误解析为静态图片。

  3. 解码问题:GIF图片在解码过程中可能出现错误,导致动画信息丢失。检查图片解码逻辑,确保GIF的每一帧都能正确解码并播放。

  4. 版本或配置问题:确认HarmonyOS鸿蒙Next的SDK版本是否支持GIF动画,以及项目配置是否正确。有时候,新版本的系统或SDK会修复此类问题。

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

回到顶部