Image如何显示gif动图
==============

#### 问题现象

gif图解码出来的PixelMap放到Image组件中只显示静态图，怎么显示动图？

#### 背景知识

*   [Image组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-graphics-display)支持图片的显示，支持加载存档图类型的数据源，包括本地资源、网络资源、Resource资源、媒体库资源和base64，也支持加载PixelMap像素图。
*   [ImageSource.createPixelMapList](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-image-imagesource#createpixelmaplist10)支持图片解码并返回PixelMap数组。针对动图如gif、Webp，此接口返回每帧图片数据；针对静态图，此接口返回唯一的一帧图片数据。

#### 解决方案

gif图片可以通过createPixelMapList创建PixelMap数组，然后传入[AnimatedDrawableDescriptor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-drawabledescriptor#animateddrawabledescriptor12)类型播放PixelMap数组动画。

import { AnimationOptions, AnimatedDrawableDescriptor } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct ImageGifDemo {
  animationOpt: AnimationOptions \= { duration: 1000, iterations: -1 };
  @State animated: AnimatedDrawableDescriptor \= new AnimatedDrawableDescriptor(\[\], this.animationOpt);
  uiContext: UIContext \= this.getUIContext();

  build() {
    Column({ space: 20 }) {
      Button('test')
        .onClick(async () \=\> {
        _  // app.media.gif1是gif文件，需要自行配置_
          let pixelMaps \= await this.getPixmapFromMedia($r('app.media.gif1'));
          this.animated \= new AnimatedDrawableDescriptor(pixelMaps, this.animationOpt);
        })

      Image(this.animated)
        .width('200')
        .height('200')
    }.width('100%')
    .alignItems(HorizontalAlign.Center)
  }

 _ // 读取资源文件返回PixelMap数组_
  private async getPixmapFromMedia(resource: Resource) {
    let uint8Array \= await this.uiContext.getHostContext()?.resourceManager.getMediaContent(resource.id);
    let imageSource \= image.createImageSource(uint8Array!.buffer.slice(0, uint8Array!.buffer.byteLength));
    let pixelMapList \= await imageSource.createPixelMapList({
      desiredPixelFormat: image.PixelMapFormat.RGBA\_8888
    });
    return pixelMapList;
  }
}

#### 总结

Image组件通过AnimatedDrawableDescriptor类型传入PixelMap数组即可实现gif动画的播放。