HarmonyOS 鸿蒙Next开发当中如何实现帧动画

HarmonyOS 鸿蒙Next开发当中如何实现帧动画 前边的问答中，我们注重概述了属性动画，在开发中，除了属性动画之外，还有一种动画，那就是帧动画，所谓帧动画，就是类似播放电影一样，一帧一帧的进行播放，相对于属性动画，其每一帧，我们都可以进行设置相关的属性值，并且具有暂停播放，继续播放的优点，而且还具备事件的实时响应，那么，本篇问答，我们就着重的概述一下帧动画。

3 回复

实现帧动画

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

首先，帧动画是通过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 设置播放次数

相关总结

在设置图片帧信息集合的时候，是不支持动态更新的，这一点大家需要知道，还有最重要的一点就是，在性能上是不如属性动画的，也就是说能用属性动画实现的，尽量使用属性动画。

更多关于HarmonyOS 鸿蒙Next开发当中如何实现帧动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现帧动画，可以使用ImageAnimator组件。该组件支持逐帧播放图片序列，实现动画效果。主要属性包括：images（图片资源数组）、duration（单次播放时长）、iterations（播放次数，-1表示无限循环）。通过state属性控制动画状态（如AnimationStatus.Running）。开发者需将帧图片资源放入resources/base/media/目录，并在代码中引用。

在HarmonyOS Next中，实现帧动画主要有两种推荐方式：使用ImageAnimator组件或通过Canvas绘制。下面分别介绍核心实现方法。

1. 使用ImageAnimator组件（适用于序列图动画）

ImageAnimator组件专为播放多帧图片序列设计，使用简单高效。

关键步骤：

  • 准备资源：将动画分解的每一帧图片（如frame1.png, frame2.png…）放入resources/base/media/目录。
  • 配置参数：在组件中设置图片数组、每帧持续时间、迭代次数等。
  • 控制播放：通过状态变量控制动画的启停、跳转。

示例代码（ArkTS）：

@Entry
@Component
struct ImageAnimatorExample {
  private images: Array<Resource> = [
    $r('app.media.frame1'),
    $r('app.media.frame2'),
    $r('app.media.frame3')
  ]
  @State isPlaying: boolean = true

  build() {
    Column() {
      ImageAnimator({
        images: this.images,
        duration: 300, // 每帧显示300ms
        iteration: 1   // 播放一次
      })
      .state(this.isPlaying ? AnimationStatus.Running : AnimationStatus.Paused)

      Button(this.isPlaying ? '暂停' : '播放')
        .onClick(() => {
          this.isPlaying = !this.isPlaying
        })
    }
  }
}

2. 使用Canvas绘制（适用于动态生成或复杂控制的帧动画）

通过CanvasRenderingContext2D逐帧绘制，可实现更灵活的动画逻辑。

关键步骤：

  • 创建画布：在UI中放置Canvas组件。
  • 实现帧循环：使用requestAnimationFrame或定时器驱动动画。
  • 绘制与更新：在每一帧中更新状态并绘制图形/图像。

示例代码（ArkTS）：

@Entry
@Component
struct CanvasAnimationExample {
  private frameIndex: number = 0
  private totalFrames: number = 60
  private context: CanvasRenderingContext2D | null = null

  aboutToAppear() {
    // 启动动画循环
    this.startAnimation()
  }

  startAnimation() {
    const updateFrame = () => {
      if (this.frameIndex >= this.totalFrames) {
        this.frameIndex = 0
      }
      this.drawFrame(this.frameIndex)
      this.frameIndex++
      requestAnimationFrame(updateFrame)
    }
    updateFrame()
  }

  drawFrame(index: number) {
    if (!this.context) return
    // 清除画布
    this.context.clearRect(0, 0, 300, 300)
    // 根据帧索引绘制内容
    this.context.fillStyle = `hsl(${index * 6}, 100%, 50%)`
    this.context.fillRect(50, 50, 200, 200)
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('300vp')
        .height('300vp')
        .onReady((ctx: CanvasRenderingContext2D) => {
          this.context = ctx
        })
    }
  }
}

选择建议

  • ImageAnimator：适合预渲染的序列图动画，性能开销小，实现简单。
  • Canvas绘制：适合需要实时计算、交互或复杂图形变化的动画。

两种方式均支持播放控制（暂停/继续）和事件响应，可根据具体场景选择。注意在组件销毁时及时释放动画资源以避免内存泄漏。

回到顶部