当前位置：首页 > VUE

vue如何实现波浪动画

2026-02-20 23:59:35VUE

实现波浪动画的方法

在Vue中实现波浪动画可以通过CSS动画或SVG路径动画完成。以下是两种常见方法：

使用CSS动画和伪元素

通过CSS的border-radius和transform属性创建波浪效果，结合Vue的动态样式绑定控制动画状态。

<template>
  <div class="wave-container">
    <div class="wave" :style="{ 'animation-duration': speed + 's' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      speed: 3 // 控制波浪速度
    }
  }
}
</script>

<style>
.wave-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 300%;
  height: 100%;
  background: #4a90e2;
  border-radius: 45% 46% 47% 48%;
  animation: wave-animation linear infinite;
  left: -100%;
  top: 20%;
}

@keyframes wave-animation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

使用SVG路径动画

通过SVG的path元素结合Vue的动态数据绑定实现更精确的波浪控制。

vue如何实现波浪动画

<template>
  <svg width="300" height="200" viewBox="0 0 300 200">
    <path :d="wavePath" fill="#4a90e2" />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      amplitude: 20,  // 波浪幅度
      frequency: 0.02, // 波浪频率
      phase: 0       // 相位控制动画
    }
  },
  computed: {
    wavePath() {
      let path = `M 0 100 `
      for (let x = 0; x <= 300; x += 10) {
        const y = 100 + this.amplitude * Math.sin(this.frequency * x + this.phase)
        path += `L ${x} ${y} `
      }
      path += 'L 300 200 L 0 200 Z'
      return path
    }
  },
  mounted() {
    setInterval(() => {
      this.phase += 0.1 // 控制波浪移动速度
    }, 50)
  }
}
</script>

使用第三方库

对于更复杂的波浪效果，可以考虑使用专门的水波纹动画库：

安装wavesurfer.js：
```
npm install wavesurfer.js
```

在Vue组件中使用：


<template>
<div ref="waveform"></div>
</template>

import WaveSurfer from 'wavesurfer.js'

export default { mounted() { const wavesurfer = WaveSurfer.create({ container: this.$refs.waveform, waveColor: '#4a90e2', progressColor: '#2a5c9e' }) wavesurfer.load('path/to/audio.mp3') } }

```