Question

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

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

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

球[0] .point.x是其x位置，y是y位置。

球[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 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;

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

Answer 2

根据增量指定方向

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

我认为这会起作用

使画布上的球慢慢移向鼠标

2 个答案: