Javascript 使用 mousemove 事件移动元素 60 FPS requestAnimationFrame

那里！我有一个获取问题#drag元素移动平稳。

我看这篇文章：http://www.html5rocks.com/en/tutorials/speed/animations/#debouncing-mouse-events http://www.html5rocks.com/en/tutorials/speed/animations/#debouncing-mouse-events

它说：“问题是mousemove移动元素时发生的事件mousemove 事件触发过多

所以，我尝试使用他们的方法：使用requestAnimationFrame + boolean checking.

看看这个小提琴的现场表演：https://jsfiddle.net/5f181w9t/ https://jsfiddle.net/5f181w9t/

HTML :

<div id="drag">this is draggable</div>

CSS :

#drag {width:100px; height:50px; background-color:red; transform:translate3d(0, 0, 0); }

JS :

var el               = document.getElementById("drag"),
    startPosition    = 0, // start position mousedown event
    currentPosition  = 0, // count current translateX value
    distancePosition = 0, // count distance between "down" & "move" event
    isMouseDown      = false; // check if mouse is down or not 

function mouseDown(e) {
    e.preventDefault(); // reset default behavior
    isMouseDown     = true;
    startPosition   = e.pageX; // get position X
    currentPosition = getTranslateX(); // get current translateX value
    requestAnimationFrame(update); // request 60fps animation
}    

function mouseMove(e) {
    e.preventDefault();
    distancePosition = (e.pageX - startPosition) + currentPosition; // count it!  
}

function mouseUp(e) {
    e.preventDefault();
    isMouseDown = false; // reset mouse is down boolean
}

function getTranslateX() {
   var translateX = parseInt(getComputedStyle(el, null).getPropertyValue("transform").split(",")[4]);

   return translateX; // get translateX value

}

function update() {
    if (isMouseDown) { // check if mouse is down
        requestAnimationFrame(update); // request 60 fps animation
    }
    el.style.transform = "translate3d(" + distancePosition + "px, 0, 0)";
  // move it!
}

el.addEventListener("mousedown", mouseDown);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp);

这是实现它的正确方法吗？

我的代码有什么问题吗？

thanks

问题是你正在使用requestAnimationFrame() in the mouseDown事件监听器。您应该在mouseMove事件侦听器，因为您希望在鼠标移动时而不是在鼠标单击时更新显示。因此，您应该更新以下所有变量isMouseDown有条件地在update功能。我建议按如下方式更正代码。

var el               = drag,
    startPosition    = 0, // start position mousedown event
    currentPosition  = 0, // count current translateX value
    distancePosition = 0, // count distance between "down" & "move" event
    isMouseDown      = false, // check if mouse is down or not
    needForRAF       = true;  // to prevent redundant rAF calls

function mouseDown(e) {
  e.preventDefault(); // reset default behavior
  isMouseDown     = true;
  currentPosition = getTranslateX(); // get current translateX value
  startPosition   = e.clientX; // get position X
}    

function mouseMove(e) {
  e.preventDefault();
  distancePosition = (e.clientX - startPosition) + currentPosition; // count it!  
  if (needForRAF && isMouseDown) {
    needForRAF = false;            // no need to call rAF up until next frame
    requestAnimationFrame(update); // request 60fps animation
  }
}

function mouseUp(e) {
  e.preventDefault();
  isMouseDown = false; // reset mouse is down boolean
}

function getTranslateX() {
  var translateX = parseInt(getComputedStyle(el, null).getPropertyValue("transform").split(",")[4]);
  return translateX; // get translateX value
}

function update() {
  needForRAF = true; // rAF now consumes the movement instruction so a new one can come
  el.style.transform = "translateX(" + distancePosition + "px)"; // move it!
}

el.addEventListener("mousedown", mouseDown);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp);

#drag {
  width: 100px;
  height: 50px;
  background-color: red;
  transform: translateX(0);
}

<div id="drag">this is draggable</div>

检查它here https://jsfiddle.net/8whq035s/3/.