鸿蒙初学者学习手册(HarmonyOSNext_API14)_自定义动画API（@ohos.animator (动画) ）
前言
在纯血鸿蒙中最具有用户特色的效果就是自定义的动画效果。在纯血鸿蒙中有多种定义方式，但是今天介绍的是ApI中的自定义动画。
注意:
动画本身具有生命周期，但是不支持在UIAbility的文件使用，简单而言就是不允许在UIAbility生命周期中调用
涉及到的API属性
Animator
| 属性 | 参数 | 功能 | 参数类型 | 返回类型 |
|---|---|---|---|---|
| create | create(options: AnimatorOptions): AnimatorResult | 创建动画 | AnimatorOptions （必填） | AnimatorResult |
AnimatorResult
| 属性 | 参数 | 功能 | 参数类型 | 返回类型 |
|---|---|---|---|---|
| reset | reset(options: AnimatorOptions): void | 更新当前动画器。 | AnimatorOptions（必填） | 无 |
| play | play(): void | 启动动画。动画会保留上一次的播放状态，比如播放状态设置reverse后，再次播放会保留reverse的播放状态。 | 无 | 无 |
| finish | finish(): void | 结束动画 | 无 | 无 |
| pause | pause(): void | 暂停动画。 | 无 | 无 |
| cancel | cancel(): void | 取消动画。 | 无 | 无 |
| reverse | reverse(): void | 以相反的顺序播放动画。使用interpolating-spring曲线时此接口无效。 | 无 | 无 |
回调函数（理解为生命周期）
| 属性 | 参数 | 功能 | 参数类型 | 返回类型 |
|---|---|---|---|---|
| onFrame | onFrame: (progress: number) => void | 接收到帧时回调。 | progress:number（必填） | 无 |
| onFinish | onFinish: () => void | 动画完成时回调。 | 无 | 无 |
| onCancel | onCancel: () => void | 动画被取消时回调。 | 无 | 无 |
| onRepeat | onRepeat: () => void | 动画重复时回调。 | 无 | 无 |
AnimatorOptions（定义动画选项。）
| 名称 | 类型 | 必填 | 功能 |
|---|---|---|---|
| duration | number | 是 | 动画持续时间 |
| easing | string | 是 | 动画插值曲线 |
| delay | number | 是 | 动画延时播放时长，单位毫秒，设置为0时，表示不延时。 |
| fill | ‘none’ ‘forwards’ ‘backwards’ ‘both’ | 是 | 动画执行后是否恢复到初始状态，动画执行后，动画结束时的状态（在最后一个关键帧中定义）将保留。 |
| direction | ‘normal’ ‘reverse’ ‘alternate’ ‘alternate-reverse’ | 是 | 动画播放模式正序，逆序，交替正序，交替逆序 |
| iterations | number | 是 | 动画播放次数 |
| begin | number | 是 | 动画插值起点。 |
| end | number | 是 | 动画插值终点。 |
注意:以上为涉及属性和参数一下为示例代码和详细注释
import { Animator as animator, AnimatorResult } from '@kit.ArkUI'; // 导入动画模块
/**
* 动画测试组件，用于演示和测试动画功能。
*/
@Entry
@Component
struct AnimatorTest {
/**
* 日志标签，用于标识日志输出的来源。
*/
private TAG: string = '[AnimatorTest]' // 定义日志标签
/**
* 动画实例，用于控制动画的播放、暂停等操作。
*/
private backAnimator: AnimatorResult | undefined = undefined // 初始化动画实例为 undefined
/**
* 标记动画是否结束的标志位。
*/
private flag: boolean = false // 初始化标志位为 false
/**
* 宽度状态变量，用于动态更新动画元素的宽度。
*/
@State wid: number = 100 // 初始化宽度为 100
/**
* 高度状态变量，用于动态更新动画元素的高度。
*/
@State hei: number = 100 // 初始化高度为 100
/**
* 创建并初始化动画实例。
* 设置动画的各种参数，并定义动画结束、重复、取消和每一帧的回调函数。
*/
create() {
this.backAnimator = animator.create({ // 创建动画实例
duration: 2000, // 设置动画持续时间为 2000 毫秒
easing: "ease", // 设置动画曲线类型为 ease
delay: 0, // 设置动画延迟时间为 0 毫秒
fill: "forwards", // 设置动画结束后保持最后一帧的状态
direction: "normal",// 设置动画播放方向为 normal
iterations: 1, // 设置动画循环次数为 1
begin: 100, // 设置动画起始值为 100
end: 200 // 设置动画结束值为 200
})
/**
* 动画结束时的回调函数。
* 将 `flag` 置为 `true` 并输出日志。
*/
this.backAnimator.onFinish = () => { // 定义动画结束时的回调函数
this.flag = true // 将标志位置为 true
console.info(this.TAG, 'backAnimator onfinish') // 输出日志信息
}
/**
* 动画重复时的回调函数。
* 输出日志信息。
*/
this.backAnimator.onRepeat = () => { // 定义动画重复时的回调函数
console.info(this.TAG, 'backAnimator repeat') // 输出日志信息
}
/**
* 动画取消时的回调函数。
* 输出日志信息。
*/
this.backAnimator.onCancel = () => { // 定义动画取消时的回调函数
console.info(this.TAG, 'backAnimator cancel') // 输出日志信息
}
/**
* 动画每一帧的回调函数。
* 更新 `wid` 和 `hei` 的值以实现动画效果。
*/
this.backAnimator.onFrame = (value: number) => { // 定义动画每一帧的回调函数
this.wid = value // 更新宽度
this.hei = value // 更新高度
}
}
/**
* 在组件即将消失时调用。
* 将 `backAnimator` 置空，避免内存泄漏。
*/
aboutToDisappear() {
// 由于backAnimator在onframe中引用了this, this中保存了backAnimator，
// 在自定义组件消失时应该将保存在组件中的backAnimator置空，避免内存泄漏
this.backAnimator = undefined; // 将动画实例置空
}
/**
* 构建页面布局。
* 包含一个红色的矩形和多个按钮，用于控制动画的创建、播放、暂停、完成、反转、取消和重置。
*/
build() {
Column() { // 创建最外层的 Column 布局
Column() { // 创建第二层 Column 布局
Column() // 创建第三层 Column 布局
.width(this.wid) // 设置宽度为当前宽度状态变量
.height(this.hei) // 设置高度为当前高度状态变量
.backgroundColor(Color.Red) // 设置背景颜色为红色
}
.width('100%') // 设置宽度为 100%
.height(300) // 设置高度为 300
Column() { // 创建包含按钮的 Column 布局
Row() { // 创建包含“create”按钮的 Row 布局
Button('create') // 创建“create”按钮
.fontSize(30) // 设置字体大小为 30
.fontColor(Color.Black) // 设置字体颜色为黑色
.onClick(() => { // 设置点击事件
this.create() // 调用 create 方法创建动画
})
}
.padding(10) // 设置内边距为 10
Row() { // 创建包含“play”按钮的 Row 布局
Button('play') // 创建“play”按钮
.fontSize(30) // 设置字体大小为 30
.fontColor(Color.Black) // 设置字体颜色为黑色
.onClick(() => { // 设置点击事件
this.flag = false // 将标志位置为 false
if (this.backAnimator) { // 如果动画实例存在
this.backAnimator.play() // 播放动画
}
})
}
.padding(10) // 设置内边距为 10
Row() { // 创建包含“pause”按钮的 Row 布局
Button('pause') // 创建“pause”按钮
.fontSize(30) // 设置字体大小为 30
.fontColor(Color.Black) // 设置字体颜色为黑色
.onClick(() => { // 设置点击事件
if (this.backAnimator) { // 如果动画实例存在
this.backAnimator.pause() // 暂停动画
}
})
}
.padding(10) // 设置内边距为 10
Row() { // 创建包含“finish”按钮的 Row 布局
Button('finish') // 创建“finish”按钮
.fontSize(30) // 设置字体大小为 30
.fontColor(Color.Black) // 设置字体颜色为黑色
.onClick(() => { // 设置点击事件
this.flag = true // 将标志位置为 true
if (this.backAnimator) { // 如果动画实例存在
this.backAnimator.finish() // 结束动画
}
})
}
.padding(10) // 设置内边距为 10
Row() { // 创建包含“reverse”按钮的 Row 布局
Button('reverse') // 创建“reverse”按钮
.fontSize(30) // 设置字体大小为 30
.fontColor(Color.Black) // 设置字体颜色为黑色
.onClick(() => { // 设置点击事件
this.flag = false // 将标志位置为 false
if (this.backAnimator) { // 如果动画实例存在
this.backAnimator.reverse() // 反转动画
}
})
}
.padding(10) // 设置内边距为 10
Row() { // 创建包含“cancel”按钮的 Row 布局
Button('cancel') // 创建“cancel”按钮
.fontSize(30) // 设置字体大小为 30
.fontColor(Color.Black) // 设置字体颜色为黑色
.onClick(() => { // 设置点击事件
if (this.backAnimator) { // 如果动画实例存在
this.backAnimator.cancel() // 取消动画
}
})
}
.padding(10) // 设置内边距为 10
Row() { // 创建包含“reset”按钮的 Row 布局
Button('reset') // 创建“reset”按钮
.fontSize(30) // 设置字体大小为 30
.fontColor(Color.Black) // 设置字体颜色为黑色
.onClick(() => { // 设置点击事件
if (this.flag) { // 如果动画已结束
this.flag = false // 将标志位置为 false
if (this.backAnimator) { // 如果动画实例存在
this.backAnimator.reset({ // 重置动画参数
duration: 3000, // 设置新的持续时间为 3000 毫秒
easing: "ease-in", // 设置新的动画曲线类型为 ease-in
delay: 0, // 设置新的延迟时间为 0 毫秒
fill: "forwards", // 设置新的动画结束后保持最后一帧的状态
direction: "alternate", // 设置新的动画播放方向为 alternate
iterations: 3, // 设置新的动画循环次数为 3
begin: 100, // 设置新的动画起始值为 100
end: 300 // 设置新的动画结束值为 300
})
}
} else { // 如果动画未结束
console.info(this.TAG, 'Animation not ended') // 输出日志信息
}
})
}
.padding(10) // 设置内边距为 10
}
}
}
}