使用精灵表动画时Javascript画布幻灯片

我正在尝试使用精灵表设置动画。但是，在更改播放器移动方向时，动画似乎通过精灵表滑动到动画中，而不是直接跳到我要使用的精灵

以下是我的渲染函数：

 function renderPlayer(me, player) {
   const { x, y, momentum } = player;
   const canvasX = canvas.width / 2 + x - me.x;
   const canvasY = canvas.height / 2 + y - me.y;

   context.save();
   context.translate(canvasX, canvasY);

   context.drawImage(
     getAsset('sasuke_sheet.png'),
     0,
     PLAYER_HEIGHT*momentum,
     PLAYER_WIDTH,
     PLAYER_HEIGHT,
     -PLAYER_WIDTH,
     -PLAYER_HEIGHT,
     PLAYER_WIDTH*2,
     PLAYER_HEIGHT*2,
   );
   context.restore();
}

以下是我设置动量等于的值：

if(this.keys[0]) {
  this.momentum = 3;
  this.y -= dt * this.speed;
}
if(this.keys[1]) {
  this.momentum = 1;
  this.x -= dt * this.speed;
}
if(this.keys[2]) {
  this.momentum = 0;
  this.y += dt * this.speed;
}
if(this.keys[3]) {
  this.momentum = 2;
  this.x += dt * this.speed;
}

---

您能描述一下“滑动”是什么意思吗？查看您的代码后，我认为问题在于

this.speed

、

dt

或

me.x/y

。你能解释一下这些变量是什么吗？是的，所以当玩家的动量改变时，它会在精灵片上移动。但是，从“精灵”工作表上的位置1更改为“精灵”工作表上的位置2似乎包括介于这些值之间的“精灵”工作表快照。所以你可以看到玩家的精灵从位置1移动到位置2，这时它应该是即时的。。。我在你的代码中没有看到

PLAYER\u WIDTH*momentum

。有一个单独的列呈现功能吗？它可能会有帮助：它是法语的，但你仍然可以翻译页面