如何通过 requestAnimationFrame 平滑动画？答案

【问题标题】：How to smooth animation via requestAnimationFrame?如何通过 requestAnimationFrame 平滑动画？
【发布时间】：2016-06-12 02:35:53
【问题描述】：

这里是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);
}

【问题讨论】：

你的小提琴不适用于我的 Chrome 版本。
@Marty Mine 在 Mac 上工作。
你的意思是如果你按住键动画不流畅？您应该处理 update() 函数中的所有动画，然后使用 keydown 和 keyup 处理程序来跟踪在任何给定时间哪些键被按下。
@nnnnnn 是的，我会添加 keyup 并再试一次，谢谢！
有很多 Javascript“游戏循环”教程（谷歌会为你找到）可以详细解释我的意思。

标签： javascript animation html5-canvas

【解决方案1】：

好的，我想通了。感谢 nnnnnnn 的评论。

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);
  }
}

【讨论】：