HarmonyOS Canvas 实现动画

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5

ArkTs的Canvas使用与webcanvas类似，相关动画实现可以移植webcanvas参考demo：

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State timerId: number = 0
  @State startAngle: number = Math.PI * 0.2 + (Math.PI / 180) * 90; // 起始角度（弧度制）
  @State endAngle: number = Math.PI * 1.8 + (Math.PI / 180) * 90; // 结束角度（弧度制）
  lengthToAdd: number = Math.PI / 360; // 每次绘制的长度（弧度制）
  @State currentAngle: number = 0
  @State step: number = 1;
  // 设置圆心坐标和半径
  centerX = 200;
  centerY = 200;
  radius = 100;

  aboutToAppear(): void {
    this.currentAngle = this.startAngle
    this.timerId = setInterval(() => {
      if (this.step %2 == 1) {
        this.currentAngle += this.lengthToAdd;
        this.drawArc();
        if (this.currentAngle > this.endAngle) {
          this.step++;
          this.context.globalCompositeOperation = "destination-out"; // 修改混合模式，准备擦除
          this.context.lineWidth = 21; // 擦除时，线更宽一些，防止有残留
        }
      } else {
        this.eraseArc();
        this.currentAngle -= this.lengthToAdd;
        if (this.currentAngle<= this.startAngle) {
          this.step++;
          this.context.globalCompositeOperation = "source-over"; // 修改混合模式，正常绘制
          this.context.lineWidth = 20; // 正常线宽
        }
      }
    }, 10)
  }

  drawArc() {
    // 绘制圆弧
    this.context.beginPath();
    this.context.arc(
      this.centerX, // 圆弧中心的 x 坐标
      this.centerY + 30, // 圆弧中心的 y 坐标
      this.radius, // 圆弧的半径
      this.currentAngle - this.lengthToAdd, // 圆弧的起始角度（弧度制）
      this.currentAngle + this.lengthToAdd // 圆弧的结束角度（弧度制）
    );
    this.context.stroke();
  }

  eraseArc() {
    this.context.beginPath();
    this.context.arc(
      this.centerX,
      this.centerY + 30,
      this.radius,
      this.currentAngle - this.lengthToAdd,
      this.currentAngle + 2 * this.lengthToAdd // 擦除时，擦除的更宽一些，防止有残留
    );
    this.context.stroke();
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          // 设置圆弧的颜色和宽度
          this.context.strokeStyle = Color.Green;
          this.context.lineWidth = 20;
        })
    }
    .width('100%')
    .height('100%')
  }
}
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.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.