鸿蒙开发之帧动画ImageAnimator

鸿蒙帧动画需要借助组件ImageAnimator。使用的时候想要让动画动起来需要设置state为AnimationStatus.Running

@Entry
@Component
struct OfficialImageAnimatorPage {
  build() {
      Column() {
        ImageAnimator()
          //动画数组
          .images([
            {src:$r('app.media.icon')},
            {src:$rawfile('111.png')},
            {src:$rawfile('222.png')},
            {src:$rawfile('333.png')},
          ])
          //动画时长
          .duration(2000)
          .margin({top:30})
          .backgroundColor(Color.Green)
          //开始
          .state(AnimationStatus.Running)
          //正序还是倒序
          .reverse(false)
          .fillMode(FillMode.Forwards)
          //重复次数，-1为无限
          .iterations(-1)
          .width(340)
          .height(240)
          //动画开始回调函数
          .onStart(() => {
            console.info(' ImageAnimator onStart')
          })
          .onPause(() => {
            console.info('ImageAnimator onPause')
          })
          .onRepeat(() => {
            console.info('ImageAnimator onRepeat')
          })
          .onCancel(() => {
            console.info('ImageAnimator onCancel')
          })
          .onFinish(() => {
            console.info('ImageAnimator onFinish')
          })
      }
      .width('100%')
      .height('100%')
  }
}

如果，帧动画的图片大小不一样，并且间隔时间也不同。就需要设置参数fixedSize(false)。但是，需要注意的是，设置fixedSize为false后，需要设置每个图片的大小，当然也可以搭配上动画时长，如下

@Entry
@Component
struct OfficialImageAnimatorPage {
  build() {
      Column() {
        ImageAnimator()
          //动画数组
          .images([
            {src:$r('app.media.icon'),
              width:100,
              height:100,
              top:40,
              left:40,
              duration:1000},
            {src:$rawfile('111.png'),
              width:200,
              height:200,
              top:30,
              left:50,
              duration:200},
            {src:$rawfile('222.png'),
              width:300,
              height:200,
              top:10,
              left:50,
              duration:500},
            {src:$rawfile('333.png'),
              width:100,
              height:100,
              top:10,
              left:150,
              duration:300},
          ])
          //动画时长
          .duration(2000)
          .margin({top:30})
          .backgroundColor(Color.Green)
          //开始
          .state(AnimationStatus.Running)
          //正序还是倒序
          .reverse(false)
          .fillMode(FillMode.Forwards)
          //图片自己设置宽高
          .fixedSize(false)
          //重复次数，-1为无限
          .iterations(-1)
          .width(340)
          .height(240)
          //动画开始回调函数
          .onStart(() => {
            console.info(' ImageAnimator onStart')
          })
          .onPause(() => {
            console.info('ImageAnimator onPause')
          })
          .onRepeat(() => {
            console.info('ImageAnimator onRepeat')
          })
          .onCancel(() => {
            console.info('ImageAnimator onCancel')
          })
          .onFinish(() => {
            console.info('ImageAnimator onFinish')
          })
      }
      .width('100%')
      .height('100%')
  }
}