站立的运动效果 object

Question

我正在尝试为站立object实现运动效果。
我假设我的 object 可以向右或向左移动。
而且我想要错觉那样object还在动。哪怕目前不动。（同时背景仍然可以移动......）

'use strict';

const pressedKeys = [];
const canvas = document.querySelector('#game');
const ctx = canvas.getContext('2d');

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

class Player
{
    xPosition = 150;
    yPosition = 50;
    speed = 5;
    isMoving = false;

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

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

const player = new Player();

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

    if (player.isMoving) {
        player.update(pressedKeys);
    }

    player.draw(ctx);
}

animate();

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

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

canvas {
    border: 1px solid blue;
}

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

Answer 1

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

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

所以首先我们需要另一个属性给你的播放器 class 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, this.y, 30, 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, this.y, 30, 30);
    }
    ctx.restore();

  }
}

const player = new Player();

function animate() {
  window.requestAnimationFrame(animate);
  ctx.clearRect(0, 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>

站立的运动效果 object

Motion effect for standing object

html

javascript

2d

motion-blur

html5-canvas