HarmonyNext动画大全03-帧动画

HarmonyNext动画大全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 动画重复执行时触发的事件