实现帧动画

ImageAnimator 帧动画组件

效果展示

常用属性

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

事件

onStart

onStart(event: () => void)

状态回调，动画开始播放时触发。

onPause

onPause(event: () => void)

状态回调，动画暂停播放时触发。

onRepeat

onRepeat(event: () => void)

状态回调，动画重复播放时触发。

onCancel

onCancel(event: () => void)

状态回调，动画返回最初状态时触发。

onFinish

onFinish(event: () => void)

状态回调，动画播放完成时或者停止播放时触发。

代码展示

import { AnimationOptions } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State animationctr: 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(250)
        .height(150)
        .state(this.animationctr)   //注
        .duration(500)
        .iterations(-1)
      Row() {
        Button('播放')
          .onClick(()=>{
            this.animationctr=AnimationStatus.Running
          })
        Button('暂停 ')
          .onClick(()=>{
            this.animationctr=AnimationStatus.Stopped
          })
        Button('停止')
          .onClick(()=>{
            this.animationctr=AnimationStatus.Paused
          })
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Orange)
  }
}