如何为站立的物体添加运动效果

如何解决如何为站立的物体添加运动效果

我尝试实现运动效果，甚至对于站立的物体。
为什么？ - 我假设，例如，我的对象会向右移动。
但是，我想在物体仍在移动的某个部分创造幻觉。即使不是。
后来我想对其他对象也有同样的效果。

这是我想要实现的示例（或多或少） - 幻觉对象将就地：

'use strict';

const keys = [];
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 150;

class Player
{
    x = 150;
    y = 50;
    speed = 5;
    moving = false;

    update(keys)
    {
        if (keys['ArrowLeft']) {
            this.x -= this.speed;
        } else if (keys['ArrowRight']) {
            this.x += this.speed;
        }
    }

    draw(ctx)
    {
        ctx.fillStyle = '#2976f2';
        ctx.fillRect(this.x,this.y,30,30);
    }
}

const player = new Player();

function animate()
{
    window.requestAnimationFrame(animate);
    ctx.clearRect(0,canvas.width,canvas.height)

    if (player.moving) {
        player.update(keys);
    }

    player.draw(ctx);
}

animate();

window.addEventListener('keyup',function (event) {
  delete keys[event.key]
  player.moving = false;
})

window.addEventListener('keydown',function (event) {
    switch (event.key) {
    case 'ArrowLeft':
    case 'ArrowRight':
    keys[event.key] = true;
    player.moving = true;
        break;
  }
})

canvas {
  border: 1px solid blue;
}

<canvas id="game"></canvas>

解决方法

通常这种效果是通过不断复制所需的对象，将其移动到完全相同的屏幕位置并最终随着时间的推移逐渐淡出来实现的，例如一秒内。

在你的情况下，虽然我们可以简化一些事情，因为你想保持“运动模糊”的外观，即使它没有移动。

因此，首先我们需要将另一个属性添加到您的 Player 类 oldX。它在移动发生之前保持对象的位置。通过从 x 中减去 oldX，我们可以确定对象是向左移动还是向右移动 - 这样我们就知道将尾随的重复项放在哪里。

如果我们知道方向，我们就可以使用简单的 for 循环开始创建重复项，例如：

for (var a = 0; a < 7; a++) {
  ctx.fillRect(this.x - (this.x - this.oldX) / this.speed * a * 2,this.y,30,30);
}

这将创建七个相同的正方形 - 所以它看起来还不太好。原件旁边的副本应该具有几乎相同的颜色，而最后一个应该几乎与背景混合。为此，我们可以使用画布上下文的 globalAlpha 属性。值为 1 表示不透明，而值为 0 表示完全透明。

综合起来：

const keys = [];
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 150;

class Player {
  x = 150;
  y = 50;
  oldX = 150;
  speed = 5;
  moving = false;

  update(keys) {
    this.oldX = this.x;
    if (keys['ArrowLeft']) {
      this.x -= this.speed;
    } else if (keys['ArrowRight']) {
      this.x += this.speed;
    }
  }

  draw(ctx) {
    ctx.fillStyle = '#2976f2';
    ctx.fillRect(this.x,30);
    ctx.save();
    for (var a = 0; a < 7; a++) {
      ctx.globalAlpha = 0.5 - (a / 7) * 0.5;
      ctx.fillRect(this.x - (this.x - this.oldX) / this.speed * a * 2,30);
    }
    ctx.restore();

  }
}

const player = new Player();

function animate() {
  window.requestAnimationFrame(animate);
  ctx.clearRect(0,canvas.width,canvas.height)

  if (player.moving) {
    player.update(keys);
  }

  player.draw(ctx);
}

animate();

window.addEventListener('keyup',function(event) {
  delete keys[event.key]
  player.moving = false;
})

window.addEventListener('keydown',function(event) {
  switch (event.key) {
    case 'ArrowLeft':
    case 'ArrowRight':
      keys[event.key] = true;
      player.moving = true;
      break;
  }
})

canvas {
  border: 1px solid blue;
}

<canvas id="game"></canvas>