鸿蒙开发之帧动画ImageAnimator

Lu_Ca

已于 2024-01-18 14:30:32 修改

阅读量655

点赞数 7

分类专栏：鸿蒙开发文章标签： harmonyos 华为鸿蒙

于 2024-01-18 14:20:05 首次发布

本文链接：https://blog.csdn.net/Lu_Ca/article/details/135673301

版权

鸿蒙开发专栏收录该内容

42 篇文章 9 订阅

订阅专栏

本文详细介绍了如何在鸿蒙框架中使用ImageAnimator组件创建帧动画，包括设置动画数组、图片尺寸、时长、动画状态以及回调函数的使用。特别提到了当图片大小不一致且间隔时间不同时的处理方法。

摘要由CSDN通过智能技术生成

鸿蒙帧动画需要借助组件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%')
  }
}