高级动画可以显著提升用户体验，为应用界面带来更流畅的视觉效果。本篇将深入介绍鸿蒙框架的高级动画，包括弹性动画、透明度渐变和旋转缩放组合动画等示例。
关键词
- 高级动画
- 弹性缓动
- 自动动画
- 缓动曲线
一、Animation 组件的高级缓动曲线
缓动曲线（Easing Curve）控制动画在不同阶段的速度变化，创造更自然的动画效果。鸿蒙提供了多种缓动类型，以下示例演示带有弹性效果的自动位移动画。
二、自动弹性动画
弹性动画模拟物理弹簧运动效果，以下代码展示带弹性缓动效果的左右自动位移动画。
2.1 弹性位移动画示例
@Entry
@Component
export struct ElasticAutoAnimation {
@State private x: number = 0; // x 轴位置初始状态
build() {
Column() {
// 图片组件，应用弹性缓动动画
Image($r('app.media.cat'))
.width(305)
.height(360)
.translate({
x: this.x }) // 应用平移动画
.transition({
opacity: 0.8 }) // 设置透明度过渡效果
.margin(50)
Button('启动弹性动画') // 按钮触发弹性动画
.onClick(() => this.startElasticAnimation())
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center);
}
// 自动执行弹性动画的函数
startElasticAnimation() {
let step = 0;
let amplitude = 200; // 初始弹跳幅度
const interval = setInterval(() => {
this.x = amplitude * Math.sin(step * Math.PI / 20); // 弹性公式实现位置更新
amplitude *= 0.9; // 减小幅度
step++;
// 结束条件：当幅度足够小或完成足够多的步长时停止动画
if (amplitude < 1) {
clearInterval(interval);
}
}, 50); // 50ms的间隔
}
}
效果示例：点击“启动弹性动画”按钮，图片会左右移动，幅度逐渐减小，形成弹性效果。
三、透明度渐入渐出动画
透明度的渐入渐出效果适用于页面切换或加载动画。动态调整 opacity1 属性可以实现柔和的淡入淡出效果。
3.1 自动透明度动画示例
@Entry
@Component
export struct AutoFadeAnimation {
@State private opacity1: number = 1; // 透明度初始状态
build() {
Column() {
// 图片组件，应用透明度渐变动画
Image($r('app.media.cat'))
.width(305)
.height(360)
.opacity(this.opacity1) // 动态调整透明度
.margin(50)
Button('启动渐入渐出') // 按钮触发透明度动画
.onClick(() => this.startFadeAnimation())
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center);
}
// 自动执行渐入渐出动画的函数
startFadeAnimation() {
setInterval(() => {
this.opacity1 = this.opacity1 === 1 ? 0.2 : 1; // 在透明与不透明之间切换
}, 800); // 每 800ms 切换透明度
}
}
效果示例：点击“启动渐入渐出”按钮后，图片会自动在透明和不透明状态之间变化。
四、旋转与缩放组合动画
旋转和缩放组合动画适用于强调或引导用户注意力。以下代码展示自动旋转与缩放的组合动画。
4.1 自动旋转与缩放组合动画
@Entry
@Component
export struct RotateScaleAnimation {
@State private rotation: number = 0; // 旋转角度
@State private scale1: number = 1; // 缩放比例
build() {
Column() {
// 图片组件，应用旋转与缩放动画
Image($r('app.media.cat'))
.width(305)
.height(360)
.rotate({
angle: this.rotation }) // 应用旋转
.scale({
x: this.scale1, y: this.scale1 }) // 应用缩放
.transition({
opacity: 0.7 }) // 设置透明度过渡
.margin(50)
Button('启动旋转缩放') // 按钮触发组合动画
.onClick(() => this.startRotateScaleAnimation())
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center);
}
// 自动执行旋转与缩放动画的函数
startRotateScaleAnimation() {
setInterval(() => {
this.rotation += 45; // 每次增加45度旋转
this.scale1 = this.scale1 === 1 ? 1.5 : 1; // 缩放比例在 1 和 1.5 之间切换
}, 1200); // 每 1.2 秒切换一次
}
}
效果示例：点击“启动旋转缩放”按钮后，图片会自动旋转 45 度并在两种缩放比例间切换。
五、综合应用：弹性缩放与透明度渐变
以下示例展示了弹性缩放与透明度渐变的组合动画，使界面效果更加丰富。
5.1 弹性缩放与渐变动画
@Entry
@Component
export struct ElasticScaleFadeAnimation {
@State private scale1: number = 1; // 缩放比例
@State private opacity1: number = 1; // 透明度
build() {
Column() {
// 图片组件，应用弹性缩放和透明度渐变
Image($r('app.media.cat'))
.width(305)
.height(360)
.scale({
x: this.scale1, y: this.scale1 }) // 应用缩放
.opacity(this.opacity1) // 应用透明度
.transition({
opacity: 0.5 }) // 设置透明度过渡
.margin(50)
Button('启动弹性缩放与渐变') // 按钮触发组合动画
.onClick(() => this.startElasticScaleFade())
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center);
}
// 自动执行弹性缩放与渐变的函数
startElasticScaleFade() {
let amplitude = 1.3;
const interval = setInterval(() => {
this.scale1 = amplitude; // 缩放弹性效果
this.opacity1 = this.opacity1 === 1 ? 0.5 : 1; // 在两种透明度之间渐变
amplitude = amplitude > 1 ? 1 : 1.3; // 缩放幅度的弹性切换
// 若达到目标状态则清除动画
if (Math.abs(amplitude - 1) < 0.1) {
clearInterval(interval);
}
}, 1000);
}
}
效果示例：点击“启动弹性缩放与渐变”按钮后，图片会进行弹性缩放，并在透明与不透明之间渐变显示。
小结
本篇介绍了鸿蒙 Animation 组件的高级动画控制，通过弹性效果、渐入渐出和旋转缩放的组合，帮助开发者创建更加生动的界面效果。掌握这些技巧后，可以根据需要灵活运用，设计出高品质的动画效果。
下一篇预告
在下一篇中，我们将深入介绍自定义动画路径，实现更复杂的动画运动方式。
上一篇： 「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation组件基础
下一篇： 「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=235
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
