HarmonyOS Next 动画大全 03-帧动画

HarmonyOS Next 动画大全 03-帧动画

介绍

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

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

帧动画示例

酷狗音乐

基本使用

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

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

1. 引入帧动画

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

1. Animator 是用来创建帧动画对象的
2. 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。

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

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

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

3. delay 延迟时间 单位毫秒

4. fill 动画播放之外的状态

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

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

   1. A-B
   2. B-A
   3. A-B
   4. B-A
6. iterations 动画执行次数，-1 为无限
7. begin 表示动画开始的数值
8. 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)
  }
}

其他的方法

帧对象的其他方法

1. reset 重置动画器

   reset(AnimatorOptions);

2. play 播放动画
3. finish 完成动画播放 相当于设置动画到了 end 的数值的状态
4. pause 暂停动画
5. cancel 取消动画
6. reverse 以相反的顺序播放动画

其他事件

1. onFrame 帧变化事件
2. onFinish 动画完成事件
3. onCancel 动画取消事件
4. onRepeat 动画重复执行时触发的事件