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

2024-06-03 • 问答

### 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上的元素的角度返回零。需要使它从超出设定条件之前的角度缓慢回到零。

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

要使其恢复正常，您将必须使用animationFrame在逐帧的基础上对其进行调整。我认为最简单的方法是将角度的计算和应用分开，然后允许一种方法继续调用角度的减小。由于我不确定最终结果是什么，因此以下只是一个猜测（并假设您的角度是否回到0）：

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;

    // Store this globally so both your methods can access and change it
    let angle = 0;

    function undoPupil( t ){

        // Reduce the angle,limit it,etc...
        angle -= 1;
        angle = angle < 0 ? 0 : angle;
        
        // Only request an animation frame if the angle needs to change further
        if( angle > 0 ) window.requestAnimationFrame( applyPupil );

    }
    function applyPupil( angle ){

      pupil.style.transform = `translateX(${R - r + `px`}) rotate(${angle + `deg`})`;
      pupil.style.transformOrigin = `${r + `px`} center`;
    
      // Start undoing the angle here
      undoPupil();

    }

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

    });

  }
};


export {initEyeMove};

如果您想要更流畅的体验，或者可以控制持续时间，则可以选择以下路线，我们在其中存储时间并使用它来计算增量，以便我们可以在给定时间内应用它。

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;
    let angle = 0;
    
    // We will store the time the animation frame gets called here
    let time = 0;
    // Store the duration as well.
    let duration = 5000;

    function undoPupil( t ){

        const delta = time - t;

        time = t;

        // Reduce the angle,etc...
        angle *= 1 - (delta / duration);
        angle = angle < 0 ? 0 : angle;
        
        // Only request an animation frame if the angle needs to change further
        if( angle > 0 ) window.requestAnimationFrame( applyPupil );

    }
    function applyPupil( angle ){

      pupil.style.transform = `translateX(${R - r + `px`}) rotate(${angle + `deg`})`;
      pupil.style.transformOrigin = `${r + `px`} center`;
    
      // Start undoing the angle here
      undoPupil();

    }

    document.addEventListener(`mousemove`,(e) => {

      let x = e.clientX - centerX;
      let y = e.clientY - centerY;
      let theta = Math.atan2(y,x);
      
      angle = theta * 180 / Math.PI + 360;
      time = window.performance ? window.performance.now() : Date.now()
      applyPupil();

    });

  }
};


export {initEyeMove};

请注意，我没有测试这些内容，因为我没有关于应该发生的情况的上下文。在此处的代码段中添加HTML以及也许一些代码来显示您想要的效果，然后我们可以为您提供进一步的帮助。

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

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

大家都在问