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

Question

我正在尝试使用精灵表制作动画。但是，当改变玩家移动的方向时，动画似乎会通过精灵表滑动到动画，而不是直接跳转到我想要使用的精灵。

这是我的渲染功能：

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

精灵表

标签： javascriptcanvas