如何通过requestAnimationFrame平滑动画

How to smooth animation via requestAnimationFrame?

本文关键字：动画 平滑 requestAnimationFrame 何通过      更新时间：2023-09-26

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

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

好的，我想通了。感谢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.

这是更新的小提琴。

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);
  }
}
相关文章：