HarmonyOS 基于canvas绘制额度动效如何实现

示例参考：

import { FontUtils, Logger, NumberUtils } from '@marchosius/common';
import { MeasureUtils } from '@ohos.arkui.UIContext';

const TAG = 'HalfCircle'

@Component
export struct HalfCircle {
  @State curAmount: number = 0;
  availableAmount: number = 1000;
  totalAmount: number = 1000;
  amountOffset: number = 0.11;
  availableAmountFontSize: number = 24;
  availableAmountFontFamily: string = 'sans-serif';
  // todo 迁移到resource里定义文本
  availableAmountMessage: string = "可用额度";
  availableAmountMessageFontSize: number = 24;
  availableAmountMessageFontFamily: string = 'sans-serif';
  private contextSetting: RenderingContextSettings = new RenderingContextSettings(true);
  private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.contextSetting);
  // vp
  circleRadius: number = 100;
  circleLineWidth: number = 16;

  aboutToAppear(): void {
    this.amountOffset = this.availableAmount / 1000 + 0.11;
  }

  drawCanvas() {
    let ctx = this.canvasContext;
    this.drawArc(ctx);
  }

  drawArc(ctx: CanvasRenderingContext2D) {
    let canvasWidth = ctx.width;
    let canvasHeight = ctx.height;
    let diameter = canvasWidth - 2 * this.circleLineWidth;
    let radius = diameter / 2;
    let centerX = canvasWidth / 2;
    let centerY = canvasHeight - this.circleLineWidth / 2;

    // 绘制arc
    // 创建一个从左到右的线性渐变
    let gradient = ctx.createLinearGradient(0, centerY, canvasWidth, centerY);
    gradient.addColorStop(0.0, '#ff00ffe1');
    gradient.addColorStop(1.0, '#ff0e3ce2');
    ctx.lineWidth = this.circleLineWidth;
    ctx.lineCap = 'round';
    ctx.strokeStyle = gradient;
    let startArc = Math.PI;
    let intervalId = setInterval(() => {
      this.curAmount =
        (Math.floor(this.curAmount * 100) / 100 > this.availableAmount) ? this.availableAmount : this.curAmount;
      // 通过Math.floor(num * 100) / 100解决js精度问题导致最终显示不为实际数据
      if (this.curAmount >= this.availableAmount) {
        clearInterval(intervalId);
        return;
      }
      let percent = this.amountOffset / this.totalAmount;
      let endArc = startArc + Math.PI * percent;
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, startArc, endArc, false);
      ctx.stroke();
      ctx.closePath();
      startArc = endArc;
      this.curAmount += this.amountOffset;
    }, 1)
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Canvas(this.canvasContext)
        .width('100%')
        .height(('100%'))
        .backgroundColor('#F5DC62')
        .onReady(() => {
          this.drawCanvas();
        })
      Column() {
        Text(this.availableAmountMessage)
          .fontSize(this.availableAmountMessageFontSize)
          .fontFamily(this.availableAmountMessageFontFamily)
        Text(NumberUtils.moneyFormat(this.curAmount))
          .fontSize(this.availableAmountFontSize)
          .fontFamily(this.availableAmountFontFamily)
      }
    }
    .width(this.circleRadius * 2)
    .height(this.circleRadius)
  }
}
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.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.