vue + svg 绘制水波纹、波浪动画效果

效果：

实现可配置图像大小、水面高度、波浪高度、波浪速度等

<template>
  <div class="wave-svg" :style="`width:${width}px;height:${height}px;`">
    <div style="width:100%;height:100%;">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
        :width="width" 
        :height="height" 
        :viewbox="`0 0 ${width} ${height}`">
      <defs>
        <linearGradient id="line1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:#3DCDEA;stop-opacity:1"/>
          <stop offset="100%" style="stop-color:#0070EA; stop-opacity:1"/>
        </linearGradient>
      </defs>
      <defs>
        <linearGradient id="line2" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:#4AB5FF;stop-opacity:1"/>
          <stop offset="100%" style="stop-color:#3686FF; stop-opacity:1"/>
        </linearGradient>
      </defs>
      <defs>
        <linearGradient id="line3" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:#49A1FF;stop-opacity:1"/>
          <stop offset="100%" style="stop-color:#3686FF;stop-opacity:1"/>
        </linearGradient>
      </defs>
      <path v-if="topLinePath" :d="topLinePath" stroke="transparent" fill="url(#line3)">
        <animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedTop}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" />
      </path>
      <path v-if="centerLinePath" :d="centerLinePath" stroke="transparent" fill="url(#line2)">
        <animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedCenter}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" />
      </path>
      <path v-if="bottomLinePath" :d="bottomLinePath" stroke="transparent" fill="url(#line1)">
        <animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedBottom}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" />
      </path>
    </svg>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    width:{
      type:Number,      //图像宽度
      default:450
    },
    height:{
      type:Number,      //图像高度
      default:400
    },
    waterHeight:{
      type:Number,      //水面高度
      default:360
    },
    bulgeHeight:{
      type:Number,      //波浪起伏高度
      default:15
    },
    bulgeDistance:{
      type:Number,      //波浪起伏间隔
      default:30
    },
    lineDistance:{
      type:Number,      //三条线的距离
      default:20
    },
    speedTop:{
      type:Number,      //第一根线速度
      default:1
    },
    speedCenter:{
      type:Number,      //第一根线速度
      default:1
    },
    speedBottom:{
      type:Number,      //第一根线速度
      default:1
    },
  },
  data(){
    return{
      topLinePath:null,
      centerLinePath:null,
      bottomLinePath:null,
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    init(){
      let num = Math.floor(this.width/this.bulgeDistance)
      let basicPoint = this.height - this.waterHeight
      let basicPointCenter = this.height - this.waterHeight + this.lineDistance
      let basicPointBottom = this.height - this.waterHeight + this.lineDistance*2
      let topLinePath = `M ${-4*this.bulgeDistance} ${basicPoint} Q ${-3*this.bulgeDistance} ${basicPoint - this.bulgeHeight} ${-2*this.bulgeDistance} ${basicPoint} T 0 ${basicPoint}`
      for(var i=1;i<num;i++){
        topLinePath += ` T ${this.bulgeDistance*i*2} ${basicPoint} `
      }
      topLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`
      let centerLinePath = `M ${-5*this.bulgeDistance} ${basicPointCenter} Q ${-4*this.bulgeDistance} ${basicPointCenter - this.bulgeHeight} ${-3*this.bulgeDistance} ${basicPointCenter} T ${-this.bulgeDistance} ${basicPointCenter}`
      for(var i=1;i<num;i++){
        centerLinePath += ` T ${-this.bulgeDistance + this.bulgeDistance*i*2} ${basicPointCenter} `
      }
      centerLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`
      let bottomLinePath = `M ${-4*this.bulgeDistance} ${basicPointBottom} Q ${-3*this.bulgeDistance} ${basicPointBottom - this.bulgeHeight} ${-2*this.bulgeDistance} ${basicPointBottom} T 0 ${basicPointBottom}`
      for(var i=1;i<num;i++){
        bottomLinePath += ` T ${this.bulgeDistance*i*2} ${basicPointBottom} `
      }
      bottomLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`
      this.topLinePath = topLinePath
      this.centerLinePath = centerLinePath
      this.bottomLinePath = bottomLinePath
    }
  },
  watch:{
    waterHeight(){
      this.init()
    }
  }
}
</script>
<style lang="scss">
// .wave-svg{
//   width: 100%;
//   height: 100%;
// }
</style>