「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现 原创

@Entry
@Component
export struct BezierPathAnimation {
  @State private x: number = 0; // x 轴初始位置
  @State private y: number = 0; // y 轴初始位置

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x, y: this.y }) // 应用自定义路径的移动
        .transition({ opacity: 0.8 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动贝塞尔曲线动画') // 按钮触发贝塞尔路径动画
        .onClick(() => this.startBezierAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现贝塞尔曲线动画
  startBezierAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.02; // 递增参数t，用于控制贝塞尔曲线进度

      // 贝塞尔曲线公式
      this.x = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 150 + t * t * 300;
      this.y = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 200 + t * t * 0;

      if (t >= 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.

@Entry
@Component
export struct TimedControlAnimation {
  @State private x: number = 0; // x 轴位置
  @State private isAnimating: boolean = false; // 控制动画状态
  private intervalId: number | null = null; // 存储动画的定时器 ID

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x }) // 应用自动位移动画
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button(this.isAnimating ? '暂停' : '启动') // 切换启动和暂停按钮
        .onClick(() => this.toggleAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 启动或暂停动画
  toggleAnimation() {
    if (this.isAnimating) {
      clearInterval(this.intervalId); // 暂停动画
      this.intervalId = null;
    } else {
      this.intervalId = setInterval(() => {
        this.x = this.x === 0 ? 200 : 0; // 在 0 和 200 之间切换位置
      }, 1000); // 每1秒切换位置，实现自动平移
    }
    this.isAnimating = !this.isAnimating; // 更新动画状态
  }
}
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.

@Entry
@Component
export struct ComplexCombinationAnimation {
  @State private x: number = 0; // x 轴位置
  @State private y: number = 0; // y 轴位置
  @State private rotation: number = 0; // 旋转角度
  @State private scale1: number = 1; // 缩放比例

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x, y: this.y }) // 应用位移动画
        .rotate({ angle: this.rotation }) // 应用旋转动画
        .scale({ x: this.scale1, y: this.scale1 }) // 应用缩放动画
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动组合动画') // 按钮触发组合动画
        .onClick(() => this.startComplexAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现旋转、缩放和路径运动的组合动画
  startComplexAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.02;

      // 贝塞尔曲线路径
      this.x = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 150 + t * t * 300;
      this.y = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 200 + t * t * 0;

      // 旋转和缩放
      this.rotation += 5; // 累加旋转角度
      this.scale1 = this.scale1 === 1 ? 1.3 : 1; // 在 1 和 1.3 之间缩放

      // 动画结束条件
      if (t >= 1) clearInterval(interval);
    }, 100); // 每100ms更新一次
  }
}
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.
42.
43.
44.
45.
46.
47.

@Entry
@Component
export struct CustomEaseAnimation {
  @State private scale1: number = 1; // 缩放比例

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .scale({ x: this.scale1, y: this.scale1 }) // 应用弹性缩放
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动弹性缩放') // 按钮触发弹性缩放动画
        .onClick(() => this.startElasticScaleAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现弹性缩放动画的函数
  startElasticScaleAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.05;
      this.scale1 = 1 + Math.sin(t * Math.PI * 4) * Math.exp(-t * 4); // 弹性缓动公式

      // 当 t 超过某值时停止动画
      if (t >= 1) {
        clearInterval(interval);
        this.scale1 = 1; // 恢复缩放比例
      }
    }, 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.