学做网站知识/百度资讯指数

前言

在纯血鸿蒙中最具有用户特色的效果就是自定义的动画效果。在纯血鸿蒙中有多种定义方式，但是今天介绍的是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",     // 设置动画曲线类型为 easedelay: 0,           // 设置动画延迟时间为 0 毫秒fill: "forwards",   // 设置动画结束后保持最后一帧的状态direction: "normal",// 设置动画播放方向为 normaliterations: 1,      // 设置动画循环次数为 1begin: 100,         // 设置动画起始值为 100end: 200            // 设置动画结束值为 200})/*** 动画结束时的回调函数。* 将 `flag` 置为 `true` 并输出日志。*/this.backAnimator.onFinish = () => { // 定义动画结束时的回调函数this.flag = true // 将标志位置为 trueconsole.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) // 设置高度为 300Column() { // 创建包含按钮的 Column 布局Row() { // 创建包含“create”按钮的 Row 布局Button('create') // 创建“create”按钮.fontSize(30) // 设置字体大小为 30.fontColor(Color.Black) // 设置字体颜色为黑色.onClick(() => { // 设置点击事件this.create() // 调用 create 方法创建动画})}.padding(10) // 设置内边距为 10Row() { // 创建包含“play”按钮的 Row 布局Button('play') // 创建“play”按钮.fontSize(30) // 设置字体大小为 30.fontColor(Color.Black) // 设置字体颜色为黑色.onClick(() => { // 设置点击事件this.flag = false // 将标志位置为 falseif (this.backAnimator) { // 如果动画实例存在this.backAnimator.play() // 播放动画}})}.padding(10) // 设置内边距为 10Row() { // 创建包含“pause”按钮的 Row 布局Button('pause') // 创建“pause”按钮.fontSize(30) // 设置字体大小为 30.fontColor(Color.Black) // 设置字体颜色为黑色.onClick(() => { // 设置点击事件if (this.backAnimator) { // 如果动画实例存在this.backAnimator.pause() // 暂停动画}})}.padding(10) // 设置内边距为 10Row() { // 创建包含“finish”按钮的 Row 布局Button('finish') // 创建“finish”按钮.fontSize(30) // 设置字体大小为 30.fontColor(Color.Black) // 设置字体颜色为黑色.onClick(() => { // 设置点击事件this.flag = true // 将标志位置为 trueif (this.backAnimator) { // 如果动画实例存在this.backAnimator.finish() // 结束动画}})}.padding(10) // 设置内边距为 10Row() { // 创建包含“reverse”按钮的 Row 布局Button('reverse') // 创建“reverse”按钮.fontSize(30) // 设置字体大小为 30.fontColor(Color.Black) // 设置字体颜色为黑色.onClick(() => { // 设置点击事件this.flag = false // 将标志位置为 falseif (this.backAnimator) { // 如果动画实例存在this.backAnimator.reverse() // 反转动画}})}.padding(10) // 设置内边距为 10Row() { // 创建包含“cancel”按钮的 Row 布局Button('cancel') // 创建“cancel”按钮.fontSize(30) // 设置字体大小为 30.fontColor(Color.Black) // 设置字体颜色为黑色.onClick(() => { // 设置点击事件if (this.backAnimator) { // 如果动画实例存在this.backAnimator.cancel() // 取消动画}})}.padding(10) // 设置内边距为 10Row() { // 创建包含“reset”按钮的 Row 布局Button('reset') // 创建“reset”按钮.fontSize(30) // 设置字体大小为 30.fontColor(Color.Black) // 设置字体颜色为黑色.onClick(() => { // 设置点击事件if (this.flag) { // 如果动画已结束this.flag = false // 将标志位置为 falseif (this.backAnimator) { // 如果动画实例存在this.backAnimator.reset({ // 重置动画参数duration: 3000, // 设置新的持续时间为 3000 毫秒easing: "ease-in", // 设置新的动画曲线类型为 ease-indelay: 0, // 设置新的延迟时间为 0 毫秒fill: "forwards", // 设置新的动画结束后保持最后一帧的状态direction: "alternate", // 设置新的动画播放方向为 alternateiterations: 3, // 设置新的动画循环次数为 3begin: 100, // 设置新的动画起始值为 100end: 300 // 设置新的动画结束值为 300})}} else { // 如果动画未结束console.info(this.TAG, 'Animation not ended') // 输出日志信息}})}.padding(10) // 设置内边距为 10}}}
}