鸿蒙初学者学习手册(HarmonyOSNext_API14)_UIContext（@ohos.arkui.UIContext (UIContext)）
// 定义一个名为 AnimateToExample 的组件，并标记为入口组件 (@Entry) 和可复用组件 (@Component)
@Entry
@Component
struct AnimateToExample {
// 定义状态变量 widthSize，用于控制按钮的宽度，默认值为 250
@State widthSize: number = 250
// 定义状态变量 heightSize，用于控制按钮的高度，默认值为 100
@State heightSize: number = 100
// 定义状态变量 rotateAngle，用于控制旋转角度，默认值为 0
@State rotateAngle: number = 0
// 定义一个布尔型私有变量 flag，用于切换动画状态
private flag: boolean = true
// 定义一个 UIContext 类型的变量 uiContext，用于存储当前的 UI 上下文
uiContext: UIContext | undefined = undefined;
// aboutToAppear 方法：在组件即将显示时调用
aboutToAppear() {
// 获取当前的 UI 上下文并赋值给 uiContext
this.uiContext = this.getUIContext();
if (!this.uiContext) {
// 如果未成功获取 UI 上下文，则打印警告信息
console.warn("no uiContext");
return;
}
}
// build 方法：定义组件的 UI 结构
build() {
Column() { // 创建一个垂直布局容器
Button('change size') // 创建一个按钮，文本为 "change size"
.width(this.widthSize) // 设置按钮宽度为状态变量 widthSize
.height(this.heightSize) // 设置按钮高度为状态变量 heightSize
.margin(30) // 设置外边距为 30
.onClick(() => { // 点击按钮时触发以下逻辑
if (this.flag) { // 如果 flag 为 true
this.uiContext?.animateTo({ // 调用UIContext 的 animateTo 方法执行动画
duration: 2000, // 动画持续时间为 2000 毫秒
curve: Curve.EaseOut, // 动画曲线为 EaseOut
iterations: 1, // 动画循环次数为 1 次
playMode: PlayMode.Normal, // 动画播放模式为 Normal
onFinish: () => { // 动画结束时回调
console.info('play end') // 打印日志 "play end"
}
}, () => { // 动画更新逻辑
this.widthSize = 150 // 修改按钮宽度为 150
this.heightSize = 60 // 修改按钮高度为 60
})
} else { // 如果 flag 为 false
this.uiContext?.animateTo({}, () => { // 调用 animateTo 方法重置按钮大小
this.widthSize = 250 // 修改按钮宽度为 250
this.heightSize = 100 // 修改按钮高度为 100
})
}
this.flag = !this.flag // 切换 flag 的值
})
Button('stop rotating') // 创建另一个按钮，文本为 "stop rotating"
.margin(50) // 设置外边距为 50
.rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) // 设置按钮的旋转属性
.onAppear(() => { // 组件出现时触发以下逻辑
// 开始无限循环的旋转动画
this.uiContext?.animateTo({// 调用UIContext 的 animateTo 方法执行动画
duration: 1200, // 动画持续时间为 1200 毫秒
curve: Curve.Friction, // 动画曲线为 Friction
delay: 500, // 动画延迟 500 毫秒后开始
iterations: -1, // 动画无限循环（-1 表示无限）
playMode: PlayMode.Alternate, // 动画播放模式为 Alternate（来回交替）
expectedFrameRateRange: { // 设置期望的帧率范围
min: 10, // 最小帧率为 10
max: 120, // 最大帧率为 120
expected: 60, // 期望帧率为 60
}
}, () => { // 动画更新逻辑
this.rotateAngle = 90 // 修改旋转角度为 90 度
})
})
.onClick(() => { // 点击按钮时触发以下逻辑
this.uiContext?.animateTo({ duration: 0 }, () => { // 停止旋转动画
this.rotateAngle = 0 // 将旋转角度重置为 0 度
})
})
}.width('100%').margin({ top: 5 }) // 设置列容器宽度为 100%，顶部外边距为 5
}
}