鸿蒙ImageAnimator 提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

介绍

ImageAnimator 提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

首先引入图像数组

@State imgs:ImageFrameInfo[]=[
  {src:$r('app.media.ic_nav_01')},
  {src:$r('app.media.ic_nav_02')},
  {src:$r('app.media.ic_nav_03')},
  {src:$r('app.media.ic_nav_04')}
]

定义ImageAnimator的状态

@State state:AnimationStatus=AnimationStatus.Initial

使用ImageAnimator组件

Column(){
  ImageAnimator()
    .images(this.imgs)
    .reverse(false)
    .state(this.state)
    .duration(2000)
    .iterations(1)
    .fillMode(FillMode.None)
    .invert(1000).width('30%')
    .height('40%')
  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)
  }
}.width('100%').height('100%')