javascript - Canvas 中最流畅的跟随动画

Question

我想让一个坐标(coord1)尽可能平滑地跟随另一个坐标(coord2)，并满足以下条件:

1. coord2 能够移动。
2. 坐标 1 以尽可能平滑的方式跟随坐标 2(圆弧时尚)。
3. coord1 以恒定速度跟随。

我这里有一个例子，但它只满足条件 1 和 3，而不是 2。在该示例中，您可以使用箭头键移动球。 Click here to go to the example

这是我的以下代码:

Obstacle.prototype.follow = function () {
  this.y += this.vSpeed
  this.x += this.hSpeed

  if (this.x < ball.x - 9) {
    this.hSpeed = 1;
  }
  if (this.x > ball.x - 10) {
    this.hSpeed = -1;
  }
  if (this.y > ball.y - 10) {
    this.vSpeed = -1;
  }
  if (this.y < ball.y - 9) {
    this.vSpeed = 1;
  }
}

有人有满足所有三个条件的解决方案吗？

Answer 1

为了跟随一个对象，创建一个从音调对象到另一个对象的向量。向量有方向和长度。长度是速度，方向是前进的方向。

我已经 fork 了你的 fiddle 来展示这个工作。唯一的变化是 follow 函数。 https://jsfiddle.net/blindman67/ksu518cg/2/

// obj one 
var x1 = 100;
var y1 = 100;

// object to follow
var x2 = 300;
var y2 = 200; 

每个动画帧的距离

var dist = Math.sqrt(Math.pow(x2-x1,2) + Math.pow(y2-y1,2));  // distance

创建长度为 1 像素的向量

var dx = (x2-x1)/dist;
var dy = (y2-y1)/dist;

乘以你想要移动的速度

dx *= speed;
dy *= speed;

然后添加到对象位置

x2 += dx;
y2 += dy;