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

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

关键词

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

一、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
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。