vue实现波浪导航、文字等其他效果通用；

刚看到一个很有趣的需求，是一段波浪特效的导航图片。菜鸟的我决定实现这个效果。需求gif如下。 代码最终实现简易效果如下：

代码图片（vue）：

片段代码：

   navData: [
        {
          name: '导航1'
        },
        {
          name: '导航2'
        },
        {
          name: '导航3'
        },
        {
          name: '导航4'
        },
        {
          name: '导航5'
        },
        {
          name: '导航6'
        }
      ]

this.init(50, this.navData)

init(maxHeight, nodeList) {
      const len = nodeList.length
      let midNodeIndex = len >> 1
      let isOdd = len % 2 == 0
      midNodeIndex = isOdd ? midNodeIndex - 1 : midNodeIndex
      let arr = []
      for (let i = 0; i <= midNodeIndex; i++) {
        let factor = i < midNodeIndex / 2 ? i / (midNodeIndex / 2) : (1 - i / midNodeIndex) * (1 - i / midNodeIndex) + 1
        arr.push((i / midNodeIndex) * maxHeight * factor)
      }
      arr = arr.concat(arr.slice(0, arr.length - (isOdd ? 0 : 1)).reverse())
      this.navData = this.navData.map((x, y) => {
        x.top = arr[y]
        return x
    },

欢迎各位建议或采用、初出茅庐，多有不足！