简单来讲要实现鸿蒙应用中的 Canvas 水波进度动画，核心是利用 Canvas 的 Path 绘制正弦波形模拟水波，结合状态管理实现动画循环，搭配滑块完成进度交互，以下是详细实现思路和原理解析：

一、核心原理解析

水波路径生成原理：水波本质是正弦曲线（y = A*sin(ωx+φ)+k），通过计算不同 x 坐标对应的 y 值生成连续波形。其中：

A（振幅）控制水波高度，ω（角频率）控制水波密度，φ（相位偏移）实现水波流动动画；

结合进度值计算水位高度（waterLevel），进度越高水位越低；

闭合路径时连接圆形底部，使水波被限制在圆形区域内。

动画循环原理：通过setInterval不断更新相位偏移值（waveOffset），触发组件重新渲染，因正弦曲线相位变化，视觉上呈现水波流动效果。

圆形裁剪原理：给 Canvas 组件设置clip(new Circle(…))，裁剪掉圆形外的内容，让水波仅显示在圆形区域内，模拟 “水球” 效果。

二、关键代码实现

状态管理：用@State装饰waveOffset（相位偏移）和progress（进度值），状态变化自动触发 UI 刷新。

水波路径绘制：

// 生成水波路径
private getWavePath(): string {
  const centerX = 100;
  const centerY = 100;
  const radius = 90;
  const waveHeight = 10;
  const waterLevel = centerY + (100 - this.progress) * radius / 100;

  let path = `M${centerX - radius},${waterLevel}`;

  // 绘制正弦波形
  for (let x = -radius; x <= radius; x += 2) {
    const y = waterLevel + Math.sin(x / radius * Math.PI + this.waveOffset) * waveHeight;
    path += ` L${centerX + x},${y}`;
  }

  // 闭合路径
  path += ` L${centerX + radius},${centerY + radius} L${centerX - radius},${centerY + radius} Z`;
  return path;
}

动画与交互：

页面加载时（onAppear）启动定时器，更新waveOffset实现水波流动；

滑块（Slider）绑定progress状态，滑动时实时修改进度值，联动水位高度变化。

UI 结构：用Stack堆叠圆形边框和 Canvas，Canvas 内叠加进度文字，通过clip裁剪实现圆形水波效果。

三、完整代码

@Entry
@Component
struct WaterWaveDemo {
  [@State](/user/State) waveOffset: number = 0;
  [@State](/user/State) progress: number = 68; // 进度百分比

  build() {
    Column() {
      Text('Canvas水波进度动画')
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 40, bottom: 30 });

      // 水波动画Canvas
      Stack() {
        // 外层圆形容器
        Circle()
          .stroke(Color.Grey)
          .strokeWidth(2)
          .opacity(0.3)
          .width(200)
          .height(200);

        // 水波Canvas
        Canvas() {
          // 绘制水波路径
          Path()
            .commands(this.getWavePath())
            .fill('#3498DB')
            .opacity(0.6);

          // 绘制进度文字
          Text(`${this.progress}%`)
            .fontSize(36)
            .fontWeight(FontWeight.Bold)
            .fontColor('#2980B9');
        }
        .width(200)
        .height(200)
        .clip(new Circle({ width: 200, height: 200 }));
      }
      .margin({ bottom: 40 });

      // 进度控制滑块
      Slider({
        value: this.progress,
        min: 0,
        max: 100,
        style: SliderStyle.OutSet
      })
        .width('80%')
        .blockColor('#3498DB')
        .selectedColor('#3498DB')
        .onChange((value) => {
          this.progress = value;
        });
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
    .justifyContent(FlexAlign.Center)
    .onAppear(() => {
      // 水波动画循环
      setInterval(() => {
        this.waveOffset += 0.1;
        if (this.waveOffset > Math.PI * 2) {
          this.waveOffset = 0;
        }
      }, 50);
    });
  }

  // 生成水波路径
  private getWavePath(): string {
    const centerX = 100;
    const centerY = 100;
    const radius = 90;
    const waveHeight = 10;
    const waterLevel = centerY + (100 - this.progress) * radius / 100;

    let path = `M${centerX - radius},${waterLevel}`;

    // 绘制正弦波形
    for (let x = -radius; x <= radius; x += 2) {
      const y = waterLevel + Math.sin(x / radius * Math.PI + this.waveOffset) * waveHeight;
      path += ` L${centerX + x},${y}`;
    }

    // 闭合路径
    path += ` L${centerX + radius},${centerY + radius} L${centerX - radius},${centerY + radius} Z`;
    return path;
  }
}

四、效果展示