HarmonyOS Image组件播放webp动图，当组件被其他组件或页面遮挡情况下还在播放？

Question

如题：HarmonyOS Image组件播放webp动图，当组件被其他组件或页面遮挡情况下还在播放？

Answer 1

imageanimator可控制图片播放暂停停止，在onVisibleAreaChange进行业务控制是否播放

import { image } from '@kit.ImageKit'
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Example {
  pixelmaps: Array<image.PixelMap> = [];
  @State state: AnimationStatus = AnimationStatus.Initial
  @State images:Array<ImageFrameInfo> = []
  async aboutToAppear() {
    this.getPixmapFromMedia($r('app.media.xxx'))
  }
  build() {
    Column() {
      Row() {
        ImageAnimator().images(this.images)
          .state(this.state)
          .duration(1000)
          .height(100)
          .width(100)
          .iterations(-1)
          .onVisibleAreaChange([0,1],(isVisible, current)=>{
            if (isVisible) {
              console.log("lizhouze:::", isVisible, current)
            } else {
              console.log("lizhouze:::", isVisible, current)
            }
          })
        Row() {
          Button('start').width(100).padding(5).onClick(() => {
            this.state = AnimationStatus.Running
          }).margin(5)
          Button('pause').width(100).padding(5).onClick(() => {
            this.state = AnimationStatus.Paused // 显示当前帧图片
          }).margin(5)
          Button('stop').width(100).padding(5).onClick(() => {
            this.state = AnimationStatus.Stopped // 显示动画的起始帧图片
          }).margin(5)
        }

      }
    }
  }
  private async getPixmapFromMedia(resource: Resource) {
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
      bundleName: resource.bundleName,
      moduleName: resource.moduleName,
      id: resource.id
    })
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
    let decodeOpts: image.DecodingOptions = {
      sampleSize: 1,
      editable: true,
      desiredSize: { width: 198, height: 202 },
      rotate: 0,
      desiredPixelFormat: 3,
      index: 0,
    };
    imageSource.createPixelMapList(decodeOpts, (err: BusinessError, pixelMapList: Array<image.PixelMap>) => {
      if (err) {
        console.error(`Failed to create pixelMapList object.code is ${err.code},message is ${err.message}`);
      } else {
        this.pixelmaps = pixelMapList
        this.pixelmaps.forEach((element)=>{
          this.images.push({
            src:element
          })
        })
      }
    })
    await imageSource.release()
  }
}