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
- A-B
- B-A
- A-B
- B-A
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) } }
其他的方法
帧对象的其他方法
reset重置动画器
typescript
- 代码解读
- 复制代码
reset(AnimatorOptions)
play播放动画finish完成动画播放 相当于设置动画到了 end的数值的状态pause暂停动画cancel取消动画reverse以相反的顺序播放动画
其他事件
onFrame帧变化事件onFinish动画完成事件onCancel动画取消事件onRepeat动画重复执行时触发的事件
