第九节HarmonyOS 常用基础组件21-ImageAnimator

news2024/11/18 5:32:24

1、描述

提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

2、接口

ImageAnimator()

3、属性

参数名	参数类型	描述
images	Array<ImageFrameInfo>	设置图片帧信息集合，每一帧的帧信息（ImageFrameInfo）包含图片路径，图片大小、图片位置和图片播放时长信息。
state	AnimationStatus	默认为初始状态，用于控制播放状态。默认值：AnimationStatus.Initial
duration	number	单位为毫秒。默认时长为1000ms；duration为0时不播放图片；
reverse	boolean	设置播放顺序；false表示从第1张图片播放到最后1张；true表示从最后1张播放到第1张图片。默认值：false
fixedSize	boolean	设置图片大小是否固定为组件大小；true表示图片大小与组件大小一致，此时设置图片的一些属性是无效的（width、height、top、left等）。false表示每一张图片的width、height、top、left属性都要单独设置。默认值：true
fillMode	FillMode	设置动画开始与结束后的状态。默认值：FillMode.Forwards
Iterations	number	默认播放一次，设置为-1时表示无限次播放。默认值：1

4、ImageFrameInfo对象说明

参数名	参数类型	必填	描述
src	string \| Resource	是	图片路径，图片格式svg、png、jpg。
width	number \| string	否	图片宽度，默认值：0。
height	number \| string	否	图片高度，默认值：0。
top	number \| string	否	图片相对于组件左上角的纵向坐标，默认值：0。
left	number \| string	否	图片相对于组件左上角的横向坐标，默认值：0。
duration	number	否	每一帧图片播放的时长，单位毫秒，默认值：0。

5、AnimationStatus对象说明

名称	描述
Initial	动画初始状态。
Running	动画处于播放状态。
Paused	动画处于暂停状态。
Stopped	动画处于停止状态。

6、FillMode对象说明

名称	描述
None	动画未执行时不会将任何样式应用于目标，动画播放完成之后恢复初始默认状态。
Forwards	目标将保留动画执行期间最后一个关键帧状态。
Backwards	动画将在应用于目标时立即应用第一个关键帧的值，并在delay期间保留此值。第一个关键帧取决于playMode，playMode为Normal或Alternate时为form的状态，playMode为Reverse或AlternateReverse时为to的状态。
Both	动画将遵循Forwards和Backwards的规则，从而在两个方向上拓展动画属性。

7、事件

onStart(event: () => void) - 状态回调，动画开始播放时触发。

onPause(event: () => void) - 状态回调，动画暂停播放时触发。

onRepeat(event: () => void) - 状态回调，动画重复播放时触发。

onCancel(event: () => void) - 状态回调，动画取消播放时触发。

onFinish(event: () => void) - 状态回调，动画播放完成时触发。

8、示例

import router from '@ohos.router'

@Entry
@Component
struct ImageAnimatorPage {
  @State message: string = '提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。'
  @State arrayImgs: ImageFrameInfo[] = [{
    src: $r('app.media.android'),
  }, {
    src: $r('app.media.java'),
  }, {
    src: $r('app.media.harmony'),
  }, {
    src: $r('app.media.css'),
  }, {
    src: $r('app.media.java_script'),
  }, {
    src: $r('app.media.typescript'),
  }]
  @State state: AnimationStatus = AnimationStatus.Initial;
  @State reverse:boolean = false;
  @State iterations:number = 1;


  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width("96%")
          Blank(12)

          ImageAnimator()
            .images(this.arrayImgs)// 加载资源
            .duration(2000)// 设置动画间时长
            .state(this.state) // 控制播放状态
            .reverse(this.reverse) // 设置播放顺序。false表示从前到后，true表示从后往前，默认值：false。
            .iterations(this.iterations) // 设置默认播放次数，-1时无限次播放，默认值1.
            .width("96%")
            .height(200)

          Row() {
            Button('开始').width(100).padding(5).onClick(() => {
              this.state = AnimationStatus.Running
            }).margin(5)
            Button('暂停').width(100).padding(5).onClick(() => {
              this.state = AnimationStatus.Paused // 显示当前帧图片
            }).margin(5)
            Button('停止').width(100).padding(5).onClick(() => {
              this.state = AnimationStatus.Stopped // 显示动画的起始帧图片
            }).margin(5)
          }

          Row() {
            Button('播放顺序').width(100).padding(5).onClick(() => {
              this.reverse = !this.reverse
            }).margin(5)
            Button('循环次数').width(100).padding(5).onClick(() => {
              this.iterations = 2
            }).margin(5)
            Button('无限循环').width(100).padding(5).onClick(() => {
              this.iterations = -1 // 无限循环播放
            }).margin(5)
          }

          Blank(12)
          Button("ImageAnimator文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/imageAnimator/ImageAnimatorDesc",
              })
            })
          Blank(12)

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

9、效果图