鸿蒙初学者学习手册(HarmonyOSNext_API14)_自定义动画API（@ohos.animator(动

前言

在纯血鸿蒙中最具有用户特色的效果就是自定义的动画效果。在纯血鸿蒙中有多种定义方式，但是今天介绍的是ApI中的自定义动画。

注意:

动画本身具有生命周期，但是不支持在UIAbility的文件使用，简单而言就是不允许在UIAbility生命周期中调用

涉及到的API属性 Animator 属性参数功能参数类型返回类型createcreate(options: AnimatorOptions): AnimatorResult创建动画AnimatorOptions （必填）AnimatorResult AnimatorResult 属性参数功能参数类型返回类型resetreset(options: AnimatorOptions): void更新当前动画器。AnimatorOptions（必填）无playplay(): void启动动画。动画会保留上一次的播放状态，比如播放状态设置reverse后，再次播放会保留reverse的播放状态。无无finishfinish(): void结束动画无无pausepause(): void暂停动画。无无cancelcancel(): void取消动画。无无reversereverse(): void以相反的顺序播放动画。使用interpolating-spring曲线时此接口无效。无无 回调函数（理解为生命周期） 属性参数功能参数类型返回类型onFrameonFrame: (progress: number) => void接收到帧时回调。progress:number（必填）无onFinishonFinish: () => void动画完成时回调。无无onCancelonCancel: () => void动画被取消时回调。无无onRepeatonRepeat: () => void动画重复时回调。无无 AnimatorOptions（定义动画选项。） 名称类型必填功能durationnumber是动画持续时间easingstring是动画插值曲线delaynumber是动画延时播放时长，单位毫秒，设置为0时，表示不延时。fill‘none’ ‘forwards’ ‘backwards’ ‘both’是动画执行后是否恢复到初始状态，动画执行后，动画结束时的状态（在最后一个关键帧中定义）将保留。direction‘normal’ ‘reverse’ ‘alternate’ ‘alternate-reverse’是动画播放模式正序，逆序，交替正序，交替逆序iterationsnumber是动画播放次数beginnumber是动画插值起点。endnumber是动画插值终点。 注意:以上为涉及属性和参数一下为示例代码和详细注释 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 } } } }