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

@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的间隔
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

@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 切换透明度
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

@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 秒切换一次
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

@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);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.