使用三次贝塞尔曲线绘制弧形菜单

  最近项目需要做一个弧形菜单，发现都是根据旋转角度做的，但是如果我们需要的弧线很扁的话弧度就做不来了，所以我根据搜到的这两篇文章将三次贝塞尔曲线整合进去，实现弧形菜单。

 借鉴的文章：

弧形菜单效果制作（vue3） 2021-12-24_anywo01的博客-CSDN博客_弧形菜单

html5网页特效-弧形菜单_编程世界-云的博客-CSDN博客

下面是我做的效果：

 原理我的都已经在注释里解释了，这里我只是加了鼠标滚轮事件，如果想要加上下按钮可以直接调animatio方法。

在鼠标滚轮事件中我加了防抖节流

// 节流
export function _throttle(fn, interval = 1000) {
  let last
  let timer
  return function() {
    const th = this
    const args = arguments
    const now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(function() {
        last = now
        fn(th, args)
      }, interval)
    } else {
      last = now
      fn.apply(th, args)
    }
  }
}

// 防抖
export function _debounce(fn, delay = 500) {
  let timer
  return function() {
    const th = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(th, args)
    }, delay)
  }
}