HarmonyOS鸿蒙Next中怎么实现水波纹进度动画？

效果图：

改进自：Circle显示不同进度水波纹。

核心代码：

const startAnimation = () => {
  let v = 0; // 当前值 0-100
  let dir = 1; // 步进方向：+1 或 -1

  const tick = () => {
    v += dir; // 先走一步
    if (v === 0 || v === 100) {
      dir *= -1;
    } // 头尾掉头

    this.outSetValue = v;
    this.pathCommands = this.calPathCommands(v);

    const delay = (v === 0 || v === 100) ? 500 : 40; // 头尾停 500ms，其余 40ms
    setTimeout(tick, delay);
  };

  tick();
};

startAnimation();

完整代码：

const COLOR_TRANSPARENT = '#00000000';
const COLOR_BACKGROUND_FILL = '#007DFF';
const DIAMETER = 200;
const BIG_DIAMETER = 220;

@Entry
@ComponentV2
struct WaterRipplePage {
  @Local outSetValue: number = 50;
  @Local pathCommands: string = '';
  private RADIUS_IN_PX: number = this.getUIContext().vp2px(DIAMETER / 2.0);

  aboutToAppear() {
    const startAnimation = () => {
      let v = 0; // 当前值 0-100
      let dir = 1; // 步进方向：+1 或 -1

      const tick = () => {
        v += dir; // 先走一步
        if (v === 0 || v === 100) {
          dir *= -1;
        } // 头尾时掉头

        this.outSetValue = v;
        this.pathCommands = this.calPathCommands(v);

        const delay = (v === 0 || v === 100) ? 500 : 40; // 头尾停 500ms，其余 40ms
        setTimeout(tick, delay);
      };

      tick();
    };

    startAnimation();
  }

  calXSquare(y: number) {
    return this.RADIUS_IN_PX * this.RADIUS_IN_PX - (y - this.RADIUS_IN_PX) * (y - this.RADIUS_IN_PX);
  }

  calY(k: number) {
    return (1 - k) * this.RADIUS_IN_PX * 2;
  }

  formatPathCommands(x1: number, x2: number, y: number, radius: number) {
    return `M${x1} ${y} A${radius} ${radius} 0 ${y > this.RADIUS_IN_PX ? 0 : 1} 0  ${x2} ${y} ` +
      `Q${(x1 + 3 * x2) / 4} ${y + 12.5 * (x2 - x1) / radius}, ${(x1 + x2) / 2} ${y} T${x1} ${y}`;
  }

  calPathCommands(value: number): string {
    let y = this.calY(value / 100.0);
    let squareX = this.calXSquare(y);
    if (squareX >= 0) {
      let x = Math.sqrt(squareX);
      let x1 = this.RADIUS_IN_PX - x;
      let x2 = this.RADIUS_IN_PX + x;
      return this.formatPathCommands(x1, x2, y, this.RADIUS_IN_PX);
    }
    return '';
  }

  build() {
    Column() {
      Stack() {
        // 外框圆环
        Circle({ width: BIG_DIAMETER, height: BIG_DIAMETER })
          .fill(COLOR_TRANSPARENT)
          .stroke(COLOR_BACKGROUND_FILL)
          .strokeWidth(5);
        // 进度显示
        Circle({ width: DIAMETER, height: DIAMETER })
          .fill(this.outSetValue == 100 ? COLOR_BACKGROUND_FILL : COLOR_TRANSPARENT);
        Path()
          .width(DIAMETER)
          .height(DIAMETER)
          .stroke(COLOR_BACKGROUND_FILL)
          .commands(this.pathCommands)
          .fill(COLOR_BACKGROUND_FILL);
        // 进度
        Text(this.outSetValue.toFixed(0) + '%')
          .fontSize(60);
      }
      .width(BIG_DIAMETER)
      .height(BIG_DIAMETER);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}