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

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


关键词
  • 高级动画
  • 弹性缓动
  • 自动动画
  • 缓动曲线

一、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 秒切换一次
  }
}

五、综合应用:弹性缩放与透明度渐变

以下示例展示了弹性缩放与透明度渐变的组合动画,使界面效果更加丰富。

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 - 自定义动画实现

11-05 19:12