高仿 掘金头像旋转

精髓： 使用 requestAnimationFrame 达到流畅的效果

var div = document.querySelector('#drawing')

var speed = 0;
var rotateDeg = 0;
var accelete = 0.05;
var aId
function aFun(){
  rotateDeg = (rotateDeg + speed) % 360;
  div.style.transform = `rotate(${rotateDeg}deg)`
  speed =speed < 50? (speed + accelete) :speed;
  aId = window.requestAnimationFrame(aFun)
}

div.onmouseover = function(){
  aId = requestAnimationFrame(aFun)
}

div.onmouseout = function(){
  speed = 0;
  rotateDeg = 0;
  div.style.transform = `rotate(${rotateDeg}deg)`
  window.cancelAnimationFrame(aId)
}

codepen 效果预览