vue实现水波球进度条

实现水波球进度条的方法

使用 SVG 和 CSS 动画

创建一个圆形 SVG 元素，通过 CSS 动画实现水波效果。定义一个波浪路径，使用 animateTransform 或 CSS keyframes 控制波浪的移动。

<template>
  <div class="wave-ball">
    <svg viewBox="0 0 100 100">
      <path class="wave" d="M0,50 C20,70 40,30 60,50 S100,30 100,50 L100,100 L0,100 Z" />
    </svg>
    <div class="progress-text">{{ progress }}%</div>
  </div>
</template>

<style>
.wave-ball {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: #e0e0e0;
}
.wave {
  animation: wave 3s infinite linear;
  fill: #42b983;
}
@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}
</style>

动态控制进度

通过 Vue 的响应式数据绑定动态调整波浪高度，模拟进度变化。使用 computed 属性或 watch 监听进度值的变化，动态更新 SVG 路径或 CSS 属性。

<script>
export default {
  data() {
    return {
      progress: 50
    }
  },
  methods: {
    updateProgress(newValue) {
      this.progress = Math.min(100, Math.max(0, newValue));
    }
  }
}
</script>

使用第三方库

考虑使用专门的水波效果库如 vue-wave-progress 或 liquid-wave，简化实现过程。这些库通常提供更丰富的配置选项和动画效果。

npm install vue-wave-progress

<template>
  <wave-progress :progress="progress" :options="waveOptions" />
</template>

<script>
import WaveProgress from 'vue-wave-progress';
export default {
  components: { WaveProgress },
  data() {
    return {
      progress: 50,
      waveOptions: {
        color: '#42b983',
        waveHeight: 20
      }
    }
  }
}
</script>

自定义波浪路径

通过贝塞尔曲线自定义波浪形状，调整 d 属性中的控制点参数。更复杂的路径可以创建更自然的水波效果。

<path class="wave" d="M0,50 C20,60 40,40 60,50 S80,40 100,50 L100,100 L0,100 Z" />

响应式设计

确保水波球在不同屏幕尺寸下保持比例，使用百分比或 vw/vh 单位定义容器大小。通过媒体查询调整字体大小和波浪高度。

.wave-ball {
  width: 20vw;
  height: 20vw;
}
@media (max-width: 768px) {
  .wave-ball {
    width: 40vw;
    height: 40vw;
  }
}