使用JavaScript在画布上平滑设置关键帧动画

我对编程非常陌生，我正在尝试创建一些代码，允许我通过按箭头键在画布上移动一个正方形。我能让正方形移动，但它的运动不是很平稳。我让它一次以10像素的增量移动，所以我理解为什么它感觉有点不稳定，因为10帧差的每个位置之间没有任何动画，但是以较小的增量移动会使它太慢。到目前为止，我所做的工作如下：

window.onload = function init() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    setInterval(gameLoop,50);
    window.addEventListener('keydown',whatKey,true);
}

avatarX = 400
avatarY = 300

function gameLoop() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 800
    canvas.height = 600
    ctx.fillRect(avatarX,avatarY,50,50);
}

function whatKey(e) {
    switch(e.keyCode) {
    case 37:
        avatarX = avatarX - 10;
        break;
    case 39:
        avatarX = avatarX + 10;
        break;
    case 40:
        avatarY = avatarY + 10;
        break;
    case 38:
        avatarY = avatarY - 10;
        break;
    }
}

---

每次我向右按箭头键时，我都希望正方形能以恒定的速率平稳地向那个方向移动。提前感谢您的帮助

添加了一些内容，第一个是

requestAnimationFrame

然后我添加了一个

keyup

和

keydown

事件处理程序，它们将跟踪使用数组当前正在推送的键。如果当前正在推送的数组中的键为true，则为false。此方法还允许您同时按住多个键

然后我添加了速度变量，这些变量根据被按下的内容增加或减少，以及一个

maxSpeed

变量，这样你的速度就不会超过某个特定的速度。可以删除

maxSpeed

变量，也可以删除递增和递减

velX

和

velY

变量，您只需取消我留下的行的注释。它似乎在10点走得太快了，这就是为什么我增加了渐进加速

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


window.onload = function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  gameLoop();
}

window.addEventListener("keydown", function (e) {
  keys[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
  keys[e.keyCode] = false;
});


var avatarX = 400,
  avatarY = 300,
  velX = 0,
  velY = 0,
  keys = [],
  maxSpeed = 10;

function gameLoop() {
  whatKey();
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 600;

  avatarX += velX;
  avatarY += velY;

  ctx.fillRect(avatarX, avatarY, 50, 50);
  requestAnimationFrame(gameLoop);
}

function whatKey() {
  if (keys[37]) {
    //velX = -10;
    if (velX > -maxSpeed) {
      velX -= 0.5;
    }
  }

  if (keys[39]) {
    //velX = 10;
    if (velX < maxSpeed) {
      velX += 0.5;
    }
  }
  if (keys[40]) {
    //velY = 10;
    if (velY < maxSpeed) {
      velY += 0.5;
    }
  }
  if (keys[38]) {
    //velY = -10;
    if (velY > -maxSpeed) {
      velY -= 0.5;
    }
  }
}

上面的内容看起来有些急促，因为画面是用上下箭头滚动的，因为画布有点苦，所以使用全屏链接来完全测试运动

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


window.onload = function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  gameLoop();
}

window.addEventListener("keydown", function (e) {
  keys[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
  keys[e.keyCode] = false;
});


var avatarX = 400,
  avatarY = 300,
  velX = 0,
  velY = 0,
  keys = [],
  maxSpeed = 10;

function gameLoop() {
  whatKey();
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 600;

  avatarX += velX;
  avatarY += velY;

  ctx.fillRect(avatarX, avatarY, 50, 50);
  requestAnimationFrame(gameLoop);
}

function whatKey() {
  if (keys[37]) {
    //velX = -10;
    if (velX > -maxSpeed) {
      velX -= 0.5;
    }
  }

  if (keys[39]) {
    //velX = 10;
    if (velX < maxSpeed) {
      velX += 0.5;
    }
  }
  if (keys[40]) {
    //velY = 10;
    if (velY < maxSpeed) {
      velY += 0.5;
    }
  }
  if (keys[38]) {
    //velY = -10;
    if (velY > -maxSpeed) {
      velY -= 0.5;
    }
  }
}

（函数（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
window.onload=函数init（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
gameLoop（）；
}
window.addEventListener（“向下键”，函数（e）{
键[e.keyCode]=真；
});
window.addEventListener（“键控”，函数（e）{
密钥[e.keyCode]=假；
});
变量rx=400，
阿凡达=300，
velX=0，
Vy=0，
键=[]，
最大速度=10；
函数gameLoop（）{
whatKey（）；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=800；
帆布高度=600；
avatarX+=velX；
化身+=虚拟的；
ctx.fillRect（化身，化身，50,50）；
requestAnimationFrame（gameLoop）；
}
函数whatKey（）{
如果（键[37]）{
//velX=-10；
如果（velX>-maxSpeed）{
velX-=0.5；
}
}
如果（键[39]）{
//velX=10；
如果（velX-maxSpeed）{
Vly-=0.5；
}
}
}

@leetylor哈哈，我也这么想，花了一秒钟的时间才弄清楚到底发生了什么，因为画布比框架大一点，请检查此全屏链接，非常感谢！这真的很有帮助。