javascript - 如何通过requestAnimationFrame平滑动画？

Question

这是jsfiddle 。谁能告诉我为什么keydown触发的动画不流畅？

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var player = new Image();
var pw, ph;
var pvx;
player.src="http://www.clipartbest.com/cliparts/Rcd/Kzo/RcdKzozMi.png";

init();

function init(){
  player.onload = function(){
    pw = 50;
    ph = pw*player.height/player.width;
    pvx = (cw-pw)/2;
    context.drawImage(player, (cw-pw)/2, ch-ph, pw, ph);
  };
  update();
}

function update(){

  requestAnimationFrame(update);
}

document.addEventListener("keydown", function(e){
  switch(e.keyCode){
    case 37:
      requestAnimationFrame(playerMoveLeft);
      break;
    case 39:
      requestAnimationFrame(playerMoveRight);
      break;
  };
});

function playerMoveLeft(){
    pvx = pvx-5;
    context.clearRect(0, 0, cw, ch);
    context.drawImage(player, pvx, ch-ph, pw, ph);
}

function playerMoveRight(){
  pvx = pvx+5;
  context.clearRect(0, 0, cw, ch);
  context.drawImage(player, pvx, ch-ph, pw, ph);
}

Answer 1

好吧，我明白了。感谢nnnnnnnn的评论。

Do you mean if you hold the key down the animation isn't smooth? You should handle all the animation from your update() function, and then use both a keydown and keyup handler to keep track of which keys are down at any given time.

这是更新后的fiddle .

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var player = new Image();
var pw, ph;
var pvx;
var pml = false;
var pmr = false;
player.src="http://www.clipartbest.com/cliparts/Rcd/Kzo/RcdKzozMi.png";

init();

function init(){
  player.onload = function(){
    pw = 50;
    ph = pw*player.height/player.width;
    pvx = (cw-pw)/2;
    context.drawImage(player, (cw-pw)/2, ch-ph, pw, ph);
  };
  update();
}

function update(){
  if(pml){
    pvx = pvx-10;
    context.clearRect(0, 0, cw, ch);
    context.drawImage(player, pvx, ch-ph, pw, ph);
  }
  if(pmr){
    pvx = pvx+10;
    context.clearRect(0, 0, cw, ch);
    context.drawImage(player, pvx, ch-ph, pw, ph);
  }
  requestAnimationFrame(update);
}

document.addEventListener("keydown", function(e){
  switch(e.keyCode){
    case 37:
      pml = true;
      break;
    case 39:
      pmr = true;
      break;
  };
});

document.addEventListener("keyup", function(e){
  switch(e.keyCode){
    case 37:
      pml = false;
      break;
    case 39:
      pmr = false;
      break;
  };
});

function playerMoveLeft(){
  if(pml){
    pvx--;
    context.clearRect(0, 0, cw, ch);
    context.drawImage(player, pvx, ch-ph, pw, ph);
  }
}

function playerMoveRight(){
  if(pmr){
    pvx++;
    context.clearRect(0, 0, cw, ch);
    context.drawImage(player, pvx, ch-ph, pw, ph);
  }
}