当前位置：首页 > VUE

vue实现水波球进度条

2026-03-27 06:31:01VUE

Vue 实现水波球进度条

水波球进度条是一种动态展示进度效果的 UI 组件，结合 SVG 和动画可以实现水波起伏的效果。以下是实现方法：

使用 SVG 和动画

创建一个 Vue 组件，利用 SVG 绘制圆形路径，并通过动画模拟水波效果。

<template>
  <div class="water-ball">
    <svg class="water-ball-svg" viewBox="0 0 100 100">
      <defs>
        <clipPath id="water-clip">
          <path id="water-path" :d="waterPath" />
        </clipPath>
      </defs>
      <circle cx="50" cy="50" r="45" fill="#e0e0e0" />
      <circle cx="50" cy="50" r="45" fill="#4a90e2" clip-path="url(#water-clip)" />
      <text x="50" y="55" text-anchor="middle" font-size="16" fill="#333">{{ progress }}%</text>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 50,
      validator: value => value >= 0 && value <= 100
    }
  },
  data() {
    return {
      waveOffset: 0
    };
  },
  computed: {
    waterPath() {
      const amplitude = 5;
      const y = 50 - (this.progress * 0.9);
      let path = `M 0 ${y} `;
      for (let i = 0; i <= 100; i += 10) {
        const waveY = y + amplitude * Math.sin((i + this.waveOffset) * 0.1);
        path += `L ${i} ${waveY} `;
      }
      path += `L 100 100 L 0 100 Z`;
      return path;
    }
  },
  mounted() {
    this.animateWave();
  },
  methods: {
    animateWave() {
      const animate = () => {
        this.waveOffset += 1;
        requestAnimationFrame(animate);
      };
      animate();
    }
  }
};
</script>

<style>
.water-ball {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.water-ball-svg {
  width: 100%;
  height: 100%;
}
</style>

使用第三方库

如果需要更复杂的效果，可以使用第三方库如 vue-wavesurfer 或 vue-liquidfill。

安装 vue-liquidfill：

npm install vue-liquidfill

示例代码：

<template>
  <div>
    <liquid-fill :percent="progress" :wave-animation="true" />
  </div>
</template>

<script>
import LiquidFill from 'vue-liquidfill';

export default {
  components: { LiquidFill },
  data() {
    return {
      progress: 50
    };
  }
};
</script>

自定义动画效果

调整水波的振幅、频率和动画速度，可以通过修改 amplitude 和 waveOffset 的计算方式实现。例如，增加振幅：

vue实现水波球进度条

computed: {
  waterPath() {
    const amplitude = 8; // 增大振幅
    const y = 50 - (this.progress * 0.9);
    let path = `M 0 ${y} `;
    for (let i = 0; i <= 100; i += 10) {
      const waveY = y + amplitude * Math.sin((i + this.waveOffset) * 0.05); // 调整频率
      path += `L ${i} ${waveY} `;
    }
    path += `L 100 100 L 0 100 Z`;
    return path;
  }
}