帧动画组件ImageAnimator

1.ImageAnimator帧组件

ImageAnimator是一个提供帧播放图片的能力，它不是容器组件，也不需要传递参数，只需要设置属性就可以了

ImageAnimator()
  .属性()

1.1 常用属性

还有很多的属性可以查阅文档传送门

ImageAnimator()
  .images(
    [ { src: $r('app.media.loading_dog_0') },
      { src: $r('app.media.loading_dog_1') },
      { src: $r('app.media.loading_dog_2') },
      { src: $r('app.media.loading_dog_3') }
    ])//需要的图片路径
  .width(300)
  .height(150)
  .state(this.sta)//动画的初始状态已经用于控制播放状态
  .iterations(-1)//循环播放次数，-1为无限次
  .duration(500)//播放一次需要的时长

2 案例

那么接下来就可以做这个效果了

参考代码：

@Entry
@Component
struct Index {
  @State sta:AnimationStatus = AnimationStatus.Initial

  build() {
    Column() {
      
      ImageAnimator()
        .images(
          [ { src: $r('app.media.loading_dog_0') },
            { src: $r('app.media.loading_dog_1') },
            { src: $r('app.media.loading_dog_2') },
            { src: $r('app.media.loading_dog_3') }
          ])//需要的图片路径
        .width(300)
        .height(150)
        .state(this.sta)//动画的初始状态已经用于控制播放状态
        .iterations(-1)//循环播放次数，-1为无限次
        .duration(500)//播放一次需要的时长

      Row(){
        Button('开始')
          .onClick(()=>{
            this.sta = AnimationStatus.Running
          })
        Button('暂停')
          .onClick(()=>{
            this.sta = AnimationStatus.Paused
          })
        Button('停止')
          .onClick(()=>{
            this.sta = AnimationStatus.Stopped
          })
      }
      .margin({top:10})

    }.backgroundColor(Color.Pink)
    .width('100%')
    .height('100%')
  }
}

代码中的三张照片