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;
}
}
