HarmonyNext动画大全03-帧动画

万少

修改于 2025-02-10 17:29:52

6600

代码可运行

文章被收录于专栏：万少的技术分享万少的技术分享

运行总次数：0

代码可运行

HarmonyNext动画大全03-帧动画

介绍

帧动画Animator和属性动画animation、显式动画animateTo的区别在于帧动画是通过返回应用onFrame逐帧回调的方式，让开发者在

应用侧的每一帧都可以设置属性值，从而实现设置了该属性值对应组件的动画效果。并且可以轻松的控制动画的播放、暂停等状态。这让它提供了更加强大的动画控制能力

帧动画示例

酷狗音乐

基本使用

最基本的使用步骤分为4步：

引入帧动画
创建帧动画
监听帧动画的帧变化事件 -> 设置动画
开始播放

1. 引入帧动画

import { Animator,AnimatorResult } from '@kit.ArkUI';

Animator 是用来创建帧动画对象的
AnimatorResult 表示帧动画对象的类型

2. 创建帧动画

@Entry
@Component
struct Index {
  // 2 创建帧动画对象  需要传入动画参数
  animator:AnimatorResult=Animator.create({})
  build() {

  }
}

其中，在创建帧动画对象的时候，必须要传入动画参数 AnimatorOptions

帧动画参数

以下动画参数绝大部分都和之前讲过的属性动画和显式动画类似，可以返回前两篇动画文章

名称	类型	说明
duration	number	动画播放的时长，单位毫秒
easing	string	速度曲线
delay	number	延迟时间
fill	"none" \| "forwards" \| "backwards" \| "both"	动画播放之外的状态
direction	"normal" \| "reverse" \| "alternate" \| "alternate-reverse"	动画播放方向
iterations	number	动画播放次数。设置为0时不播放，设置为-1时无限次播放。说明: 设置为除-1外其他负数视为无效取值，无效取值动画默认播放1次。
begin	number	动画插值起点。默认值:0。
end	number	动画插值终点。默认值:1。

duration 动画播放时长，单位毫秒

easing 速度曲线，可以使用以下的值

linear  线性 动画速度保持不变。
ease  缓入缓出 动画开始和结束时速度较低
ease-in 缓入 动画开始时速度较低
ease-out 缓出 动画结束时速度较低
ease-in-out 缓入缓出 动画开始和结束时速度较低
fast-out-slow-in 快出慢入 标准曲线
linear-out-slow-in 线性出慢入 减速曲线
fast-out-linear-in 快出线性入 加速曲线

delay 延迟时间单位毫秒

fill 动画播放之外的状态

none 正常
forwards 动画执行完毕时，画面停留在最后一帧
backwards 在延迟等待时间呢，画面跳转到第一帧，也就是 begin的值
both 等于同时设置了 forwards 和 backwards

direction 动画播放方向如当重复执行4次动画时，动画的方向可以设置为 alternate

iterations 动画执行次数，-1 为无限

begin 表示动画开始的数值

end 表示动画结束的数值

示例代码:

  // 2 创建帧动画对象
  animator: AnimatorResult = Animator.create({
    //   持续时间
    duration: 10000,
    //   延迟时间
    delay: 0,
    //   动画曲线
    easing: "linear",
    //   播放次数
    iterations: -1,
    //   播放模式 播放之外的状态
    fill: "none",
    //   播放方向
    direction: "normal",
    // 开始角度
    begin: 0,
    // 结束角度
    end: 360
  })

3. 监听帧变化事件

通过给帧动画对象注册 onFrame事件实现监听 begin -> end 的数值变化，再将这个数值变化设置给我们的State，便可以实现动画效果了

  @State
  angle: number = 0
  
    // 3 页面开始加载的时候自动触发 aboutToAppear
  aboutToAppear() {
    //   3 监听帧变化事件
    this.animator.onFrame = (value) => {
      this.angle = value
    }
  }

不要忘记了让你的组件使用上这个变化的状态 angle

  build() {
    Column({ space: 40 }) {
      Text("变化的动画")
        .width(100)
        .height(100)
        .backgroundColor("#0094ff")
        .rotate({
          angle: this.angle
        })
        
      Button("开始动画")
        .onClick(() => {
          // 开始动画

        })
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }

4. 开始动画

  Button("开始动画")
    .onClick(() => {
      this.animator.play()
    })

最后，我们查看效果

完整代码

// 1 引入
import { Animator, AnimatorResult } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State
  angle: number = 0
  // 2 创建帧动画对象
  animator: AnimatorResult = Animator.create({
    //   持续时间
    duration: 10000,
    //   延迟时间
    delay: 0,
    //   动画曲线
    easing: "linear",
    //   播放次数
    iterations: -1,
    //   播放模式 播放之外的状态
    fill: "none",
    //   播放方向
    direction: "normal",
    // 开始角度
    begin: 0,
    // 结束角度
    end: 360
  })

  // 3 页面开始加载的时候自动触发 aboutToAppear
  aboutToAppear() {
    //   3 监听帧变化事件
    this.animator.onFrame = (value) => {
      this.angle = value
    }
  }

  build() {
    Column({ space: 40 }) {
      Text("变化的动画")
        .width(100)
        .height(100)
        .backgroundColor("#0094ff")
        .rotate({
          angle: this.angle
        })


      Button("开始动画")
        .onClick(() => {
          this.animator.play()
        })
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}