当前位置：首页 > news >正文

「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制

news 2024/11/4 12:17:52

高级动画可以显著提升用户体验，为应用界面带来更流畅的视觉效果。本篇将深入介绍鸿蒙框架的高级动画，包括弹性动画、透明度渐变和旋转缩放组合动画等示例。

在这里插入图片描述

关键词

高级动画
弹性缓动
自动动画
缓动曲线

一、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);}
}