Harmony 逐帧动画

Harmony 鸿蒙 ArkTs逐帧动画

最近刚刚新手起步，记录下我的 ‘成长过程’ ,如有错误 还请指正。

ImageAnimator()

实现逐帧动画用到的控件：ImageAnimator()，配置需要播放的图片列表，每张图片可以配置时长。

ImageAnimator属性

属性	类型	默认值	必填	描述
images	Array集合	空	是	设置图片信息集
state	AnimationStatus	Initial	否	控制播放状态
duration	number	1000ms	否	控制图片显示时长
reverse	boolean	false	否	设置播放顺序
fixedSize	boolean	true	否	控制图片是否固定大小
preDecode	number	0	否	控制预解码
fillMode	FillMode	Forwards	否	控制动画开始和结束后的状态
iterations	number	1	否	控制播放次数
onStart				动画开始播放时回调
onPause				动画暂停播放时回调
onRepeat				动画重新播放时回调
onCancel				动画取消播放时回调
onFinish				动画完成播放时回调

ImageAnimator().images() 属性

代码示例：

  @State animatorImageArr: Array<{
    src: string;
    width?: number | string;
    height?: number | string;
    top?: number | string;
    left?: number | string;
    duration?: number;
  }> = [];
  
  //示例 5张图片
	let animatorImageArr = [];
    for (let i = 0; i < 5; i++) {
      let src = `/common/animation/animation${i + 1}.png`
      let item = {
        src: src,
        duration: 250,
        width: 240,
        height: 240,
        top: 0,
        left: 0
      };
      animatorImageArr.push(item);
    }

属性	类型	描述
src	string	图片路径，支持svg、png、jpg
width	number、 string	图片宽度
height	number、 string	图片高度
top	number、 string	图片对于组件的上偏移坐标
left	number、 string	图片对于组件的左偏移坐标
duration	number	每一帧图片的播放时长，单位ms

ImageAnimator().state() 属性

代码示例:

  @State state: AnimationStatus = AnimationStatus.Initial; // 初始状态

属性	类型	描述
Initial	AnimationStatus	初始状态
Running	AnimationStatus	播放状态
Paused	AnimationStatus	暂停状态
Stopped	AnimationStatus	停止状态

ImageAnimator().duration() 属性

属性	类型	描述
duration	number	图片播放时长，当为0时不播放，只会在下一次循环时开始生效，当在images中单独设置后属性无效，默认1000ms

ImageAnimator().reverse() 属性

属性	类型	描述
reverse	boolean	设置图片播放顺序，false从最后一张图到第一张图倒放，true从第一张图到最后一张图顺序放

ImageAnimator().fixedSize() 属性

属性	类型	描述
fixedSize	boolean	设置图片大小是否固定，true表示图片大小与组件大小一致，此时单独设置的图片大小无效。false表示每一张图的height、width、top、left都需要单独设置

ImageAnimator().preDecode() 属性

属性	类型	描述
preDecode	number	是否启用预解码，默认0，0时不启用，10为播放当前页时会提前加载后面10张至缓存，提升性能

ImageAnimator().fillMode() 属性

属性	类型	描述
None	FillMode	播放完成后恢复到初始状态
Forwards	FillMode	播放完成后，保留动画结束时的状态
Backwards	FillMode	在显示动画之前，应用动画延迟指定的时段的开始属性值
Both	FillMode	向前和向后填充模式

ImageAnimator().iterations() 属性

属性	类型	描述
iterations	number	设置播放次数，-1时无限播放，默认播放一次

图示

完整代码

@Entry
@Component
struct Index {
  
  @State animatorImageArr: Array<{
    src: string;
    width?: number | string;
    height?: number | string;
    top?: number | string;
    left?: number | string;
    duration?: number;
  }> = [];


  @State state: AnimationStatus = AnimationStatus.Initial; // 初始状态

  build() {
    Row() {
      Column() {
        ImageAnimator()
          .images(this.animatorImageArr)
          .state(this.state)
          .reverse(false)
          .fixedSize(false)
          .fillMode(FillMode.None)
          .onStart(() => { // 当帧动画开始播放后触发
            LogUtil.info(TAG, 'ImageAnimator Start');
          })
          .onPause(() => {
            LogUtil.info(TAG, 'ImageAnimator Pause');
          })
          .onRepeat(() => {
            LogUtil.info(TAG, 'ImageAnimator Repeat');
          })
          .onCancel(() => {
            LogUtil.info(TAG, 'ImageAnimator Cancel');
          })
          .onFinish(() => { // 当帧动画播放完成后触发
          })
      }
      .width('100%')
    }
    .height('100%')
  }

  /**
   * 函数在创建自定义组件的新实例后，在执行其build函数之前执行,允许改变状态变量
   */
  aboutToAppear() {
    this.playAnimator()
  }

  playAnimator() {
    // 初始化动画数据
    let animatorImageArr = [];
    for (let i = 0; i < 10; i++) {
    //10张图片路径
      let src = `/common/animation/animation${i + 1}.png`
      let item = {
        src: src,
        duration: 250,
        width: 240,
        height: 240,
        top: 0,
        left: 0
      };
      animatorImageArr.push(item);
    }
    this.animatorImageArr = animatorImageArr;
    // 开始播放帧动画
    this.state = AnimationStatus.Running;
  }
}