在画布上制作一个球慢慢向鼠标移动

Question

我想让一个球慢慢向我的老鼠移动.

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

球[0] .vector.angle是它的方向.0 =正确,90 =向下,180 =向左等等,其间的一切

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

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