Javascript mousemove动画角度需要缓慢回到零

问题描述

### Increments the part of the string
## $1: version itself
## $2: number of part: 0 – major,1 – minor,2 – patch
increment_version() {
  local delimiter=.
  local array=($(echo "$1" | tr $delimiter '\n'))

  for index in ${!array[@]}; do
    if [ $index -eq $2 ]; then
      local value=array[$index]
      value=$((value+1))
      array[$index]=$value
      break
    fi
  done

  echo $(IFS=$delimiter ; echo "${array[*]}")
}

const initEyeMove = () => {
  let eyeBall = document.querySelector(`.eyeball`);
  let pupil = document.querySelector(`.pupil`);

  if (eyeBall && pupil) {

    let eyeArea = eyeBall.getBoundingClientRect();
    let pupilArea = pupil.getBoundingClientRect();
    let R = eyeArea.width / 2;
    let r = pupilArea.width / 2;
    let centerX = eyeArea.left + R;
    let centerY = eyeArea.top + R;

    document.addEventListener(`mousemove`,(e) => {
      let x = e.clientX - centerX;
      let y = e.clientY - centerY;
      let theta = Math.atan2(y,x);
      let angle = theta * 180 / Math.PI + 360;

      if (angle < 330 || angle > 380) {
        angle = 0;
      }


      pupil.style.transform = `translateX(${R - r + `px`}) rotate(${angle + `deg`})`;
      pupil.style.transformOrigin = `${r + `px`} center`;
    });
  }
};

 initEyeMove();

.pupil {
  background-color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 50%;
}

.pupil svg {
  top: 50%;
  left: 50%;
  transform: translate(30%,30%);
}

.eye {
  position: absolute;
  top: 1px;
  left: 6px;
}

.eyeball {
  width: 10px;
  height: 10px;
  background-color: none;
  position: absolute;
  top: 120px;
  left: 6px;
}

具有if语句，该语句在某些条件下使mousemove上的元素的角度返回零。 需要使它从超出设定条件之前的角度缓慢回到零。

更新：添加了更多详细信息，希望该下垂的眼睛回到初始位置时更加平滑，而不是在角度大于或小于所需角度时保持不变。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）