ImageAnimator

提供幀動(dòng)畫組件來(lái)實(shí)現(xiàn)逐幀播放圖片的能力，可以配置需要播放的圖片列表，每張圖片可以配置時(shí)長(zhǎng)。

說明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

無(wú)

接口

ImageAnimator()

從API version 10開始，該接口支持在ArkTS卡片中使用。

屬性

除支持[通用屬性]外，還支持以下屬性：

ImageFrameInfo對(duì)象說明

事件

除支持[通用事件]外，還支持以下事件：

示例

// xxx.ets
@Entry
@Component
struct ImageAnimatorExample {
  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1

  build() {
    Column({ space: 10 }) {
      ImageAnimator()
        .images([
          {
            src: $r('app.media.img1')
          },
          {
            src: $r('app.media.img2')
          },
          {
            src: $r('app.media.img3')
          },
          {
            src: $r('app.media.img4')
          }
        ])
        .duration(2000)
        .state(this.state).reverse(this.reverse)
        .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
        .margin({ top: 100 })
        .onStart(() = > {
          console.info('Start')
        })
        .onPause(() = > {
          console.info('Pause')
        })
        .onRepeat(() = > {
          console.info('Repeat')
        })
        .onCancel(() = > {
          console.info('Cancel')
        })
        .onFinish(() = > {
          console.info('Finish')
          this.state = AnimationStatus.Stopped
        })
      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     // 顯示當(dāng)前幀圖片
        }).margin(5)
        Button('stop').width(100).padding(5).onClick(() = > {
          this.state = AnimationStatus.Stopped    // 顯示動(dòng)畫的起始幀圖片
        }).margin(5)
      }

      Row() {
        Button('reverse').width(100).padding(5).onClick(() = > {
          this.reverse = !this.reverse
        }).margin(5)
        Button('once').width(100).padding(5).onClick(() = > {
          this.iterations = 1
        }).margin(5)
        Button('infinite').width(100).padding(5).onClick(() = > {
          this.iterations = -1 // 無(wú)限循環(huán)播放
        }).margin(5)
      }
    }.width('100%').height('100%')
  }
}

審核編輯 黃宇