让画布上的球慢慢向鼠标移动

Question

我正试图让一个球慢慢地向我的鼠标移动。

我使用的是一个简单的动画库 paper.js。使用这个我有一个球在屏幕上移动。这些是球的一些属性：

balls[0].vector.angle 是它的方向。 0 = 右，90 = 下，180 = 左等以及介于两者之间的所有内容

balls[0].point.x 是它的 x 位置，.y 是它的 y 位置。

balls[0].vector.length 是它的速度。

我已经设置了一个鼠标移动事件，我想我得到了它们之间的角度：

    canvas.addEventListener("mousemove", function(e){

    var a = balls[0].point.y - e.clientY;
    var b = balls[0].point.x - e.clientX;
    var angleDeg = Math.atan2(a, b) * 180 / Math.PI;
});

所以我让球静止了来测试它并在它周围移动我的鼠标。球的左边给了我 0 度。上面给我 90。右边给我 180。在球下面给我 -90 等等，介于两者之间。

然后我计算了同一事件中的距离并更改了速度以反映距离，将其设置为最大速度：

var distance = Math.sqrt( a*a + b*b );

var maxSpeed = 20; 
balls[0].vector.length = (distance/30 > maxSpeed) ? maxSpeed : distance/30;

所以我测试了速度，这很完美。当我给球早先的角度时，它会朝各个方向移动。速度仍然有效，只是球的方向不对，我不确定我做错了什么。

Answer 1

根据增量指定方向

var deltaX = e.clientX - balls[0].point.x;
var deltaY = e.clientY - balls[0].point.y;
var distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
var maxSpeed = 20; 
balls[0].vector.length = (distance/30 > maxSpeed ) ? maxSpeed  : distance / 30;
balls[0].point.x = balls[0].point.x + (balls[0].vector.length * deltaX / distance);
balls[0].point.y = balls[0].point.y + (balls[0].vector.length * deltaY / distance);

我认为这会奏效

Answer 2

坦率地说，您不需要三角函数。你所需要的只是古老的毕达哥拉斯定理。

var MAX_SPEED = 20;
var MIN_SPEED = 0.25; // Very slow if close but not frozen.
var ATTRACTION = 0.5; 
var diff_y = e.clientY - balls[0].point.y;
var diff_x = e.clientX - balls[0].point.x;
var distance = Math.sqrt(diff_x * diff_x + diff_y * diff_y)
var speed = distance * ATTRACTION;
if (speed > MAX_SPEED) speed = MAX_SPEED;
if (speed < MIN_SPEED) speed = MIN_SPEED;
// The rates along axes are proportional to speed;
// we use ratios instead of sine / cosine.
balls[0].point.x += (diff_x / distance) * speed;
balls[0].point.y += (diff_y / distance) * speed;

通过引入力和惯性可以获得更多乐趣。