笔记 HarmonyOS实战开发：ImageAnimator 帧动画组件

        帧动画就是类似播放电影一样，一帧一帧的进行播放，相对于属性动画，每一帧，我们都可以进行设置相关属性，且具有暂停播放，继续播放的优点。具有事件的实时响应，但在性能上远远不如属性动画，所以如果可以能用属性动画实现的场景，还是使用属性动画为好。

ImageAnimator不是容器组件，也不需要传递参数，只需要设置属性即可。

ImageAnimator()
.属性()

常用属性    

参数名称	参数类型		参数描述
images	Array		设置图片帧信息集合。   说明：   不支持动态更新。
state	AnimationStatus		默认为初始状态，用于控制播放状态。
duration	number		单位为毫秒，默认时长为1000ms；  duration为0时，不播放 图片；值的改变只会在下一次循环开始时生效；当images中 任意一帧图片设置了单独的duration后，该属性设置无效。 默认值：  1000 从API version 10开始，该接口支持在ArkTS卡 片中使用。
iterations	number		默认播放一次，设置为-1时表示无限次播放。   默认值：  1
revers	boolean		设置播放方向
fixedSize	boolean		设置图片大小是否固定为组件大小
fillMode	FillMode		设置当前播放方向下，动画开始前和结束后的状态

 代码演示：

@Entry
@Component
struct ImageAnimatorPage {
  //创建一个动画数组
  images: ImageFrameInfo[] = [
    { src: $r('app.media.sa1') },
    { src: $r('app.media.sa2') },
    { src: $r('app.media.sa3') },
    { src: $r('app.media.sa4') }
  ]
  //创建一个播放控制器
  @State state: AnimationStatus = AnimationStatus.Initial //动画初始状态

  build() {
    Column({space:15}) {
      ImageAnimator()
        .animatorFancy()//公共样式组件
        .images(this.images)//动画数组
        .duration(this.images.length * 1000)//动画播放的时长  时长为：数组的长度乘以1秒
        .state(this.state)//状态为初始状态
        .iterations(-1) //播放次数 当播放次数为-1时，将无限播放

      Row() {
        Button('启动').onClick(() => {
          this.state = AnimationStatus.Running//动画播放状态
        })
        Button('暂停').onClick(() => {
          this.state = AnimationStatus.Paused//动画处于暂停状态
        })
        Button('停止').onClick(() => {
          this.state = AnimationStatus.Stopped//动画处于停止状态
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)

    }
    .height('100%')
    .width('100%')

  }

  //定义一个重用样式
  @Styles
  /* 
  @Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。
  通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式*/
  animatorFancy(){
    .width(300)//宽300
    .aspectRatio(2)//宽高比例 高为150VP
    .padding(10)//内边距10VP
  }
}

代码效果展示：