鸿蒙开发：了解帧动画

原创

程序员一鸣

发布于 2024-12-30 09:44:29

12100

代码可运行

文章被收录于专栏：HarmonyOS点石成金HarmonyOS点石成金

运行总次数：0

代码可运行

前言

所谓帧动画，就是类似播放电影一样，一帧一帧的进行播放，相对于属性动画，其每一帧，我们都可以进行设置相关的属性值，并且具有暂停播放，继续播放的优点，而且还具备事件的实时响应，需要说明的是，在性能上是远远不如属性动画的，所以如果能用属性动画实现的场景，还是主推属性动画。

实现帧动画

实现一个组件逐帧移动，并且可以进行暂停操作。

首先，帧动画是通过getUIContext().createAnimator来创建一个帧动画，并通过onFrame方法来接收到帧时回调，并在此方法中进行相关执行动画操作。

简单举例

@Entry
@Component
struct Index {
  @State animatorOptions: AnimatorResult | undefined = undefined
  animatorOption: AnimatorOptions = {
    duration: 3000, //动画播放的时长
    delay: 0, //动画延时播放时长
    easing: 'linear', //动画插值曲线
    iterations: 1, //动画播放次数
    fill: "forwards", //动画执行后是否恢复到初始状态
    direction: 'normal', //动画播放模式
    begin: 0, //动画插值起点
    end: 100//动画插值终点
  }
  @State translateX: number = 0
  @State translateY: number = 0

  onPageShow(): void {
    this.animatorOptions = this.getUIContext().createAnimator(this.animatorOption)
    this.animatorOptions.onFrame = (progress: number) => {
      //接收到帧时回调
      this.translateX = progress
    }
  }

  onPageHide(): void {
    this.animatorOptions = undefined
  }

  build() {
    RelativeContainer() {

      Text("1")
        .width(30)
        .height(30)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .margin({ top: 100 })
        .id("view1")
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
        .translate({ x: this.translateX, y: this.translateY })


      Row() {
        Button("播放")
          .onClick(() => {
            this.animatorOptions?.play()
          })
        Button("暂停")
          .margin({ left: 10 })
          .onClick(() => {
            this.animatorOptions?.pause()
          })
        Button("重置")
          .margin({ left: 10 })
          .onClick(() => {
            this.translateX = 0
            this.translateY = 0
          })
      }
      .margin({ top: 10 })
      .alignRules({
        center: { anchor: "__container__", align: VerticalAlign.Center },
        middle: { anchor: "__container__", align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
  }
}

实际效果查看：

createAnimator方法会创建一个帧动画，并且返回一个AnimatorResult对象，通过AnimatorResult，我们可以实现很多功能，比如播放，暂停，取消，监听状态等等。

播放

this.animatorOptions?.play()

暂停

this.animatorOptions?.pause()

取消

this.animatorOptions?.cancel()

反转

this.animatorOptions?.reverse()

完成

this.animatorOptions?.finish()

动画完成回调

 //动画完成时执行方法
 this.animatorOptions!.onFinish = () => {
    
 }

动画取消回调

//动画取消时执行方法
this.animatorOptions!.onCancel = () => {

}

动画重复回调

this.animatorOptions!.onRepeat = () => {
}

设置期望的帧率范围

通过setExpectedFrameRateRange方法进行设置，Api必须在12及以上。

let expectedFrameRate: ExpectedFrameRateRange = {
  min: 0,
  max: 60,
  expected: 30
}
animatorResult.setExpectedFrameRateRange(expectedFrameRate)

图片帧动画

帧动画，运用最多的地方就是图片了，比如loading提示，一段简单的小动画等等，使用频率还是蛮高的，系统提供了ImageAnimator组件，方便我们进行实现。

简单举例

@Entry
@Component
struct Index {
  @State state: AnimationStatus = AnimationStatus.Running
  private images: Array<ImageFrameInfo> = [
    { src: $r("app.media.loading001") },
    { src: $r("app.media.loading002") },
    { src: $r("app.media.loading003") },
    { src: $r("app.media.loading004") },
    { src: $r("app.media.loading005") },
    { src: $r("app.media.loading006") },
    { src: $r("app.media.loading007") },
    { src: $r("app.media.loading008") },
    { src: $r("app.media.loading009") },
    { src: $r("app.media.loading010") },
    { src: $r("app.media.loading011") },
    { src: $r("app.media.loading012") }
  ]

  build() {
    RelativeContainer() {

      Column() {

        ImageAnimator()
          .images(this.images)
          .fixedSize(true)
          .fillMode(FillMode.None)
          .iterations(-1)
          .state(this.state)
          .width(40)
          .height(40)

      }
      .id("view1")
      .width(120)
      .height(120)
      .borderRadius(10)
      .backgroundColor("#80000000")
      .justifyContent(FlexAlign.Center)
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        middle: { anchor: "__container__", align: HorizontalAlign.Center }
      })
      .margin({ top: 50 })


      Row() {
        Button("播放")
          .onClick(() => {
            this.state = AnimationStatus.Running
          })
        Button("暂停")
          .margin({ left: 10 })
          .onClick(() => {

            this.state = AnimationStatus.Paused

          })
        Button("停止")
          .margin({ left: 10 })
          .onClick(() => {
            this.state = AnimationStatus.Stopped
          })
      }
      .margin({ top: 10 })
      .alignRules({
        center: { anchor: "__container__", align: VerticalAlign.Center },
        middle: { anchor: "__container__", align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
  }
}

效果查看：

除了正常的Resource资源播放，也支持播放PixelMap动画，唯一区别就是在设置数据的时候。

  imagePixelMap: Array<PixelMap> = []
  @State images:Array<ImageFrameInfo> = []
    
  async aboutToAppear() {
    this.imagePixelMap.push(await this.getPixmapFromMedia($r('app.media.icon')))
    this.images.push({src:this.imagePixelMap[0]})
  }

private async getPixmapFromMedia(resource: Resource) {
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
      bundleName: resource.bundleName,
      moduleName: resource.moduleName,
      id: resource.id
    })
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888
    })
    await imageSource.release()
    return createPixelMap
  }

ImageAnimator常用属性

属性	类型	概述
images	Array<ImageFrameInfo>	设置图片帧信息集合。不支持动态更新。
state	AnimationStatus	控制播放状态
duration	number	设置播放时长
reverse	boolean	设置播放方向
fixedSize	boolean	设置图片大小是否固定为组件大小
fillMode	FillMode	设置当前播放方向下，动画开始前和结束后的状态
iterations	number	设置播放次数