我试图使一个球慢慢向我的鼠标移动。
我正在使用paper.js,这是一个简单的动画库。使用这个,我在屏幕上移动了一个球。这些是球的一些特性:
balls [0] .vector.angle是它的方向。 0 =右,90 =向下,180 =左,依此类推
balls [0] .point.x是它的x位置,.y是y位置。
ball [0] .vector.length是它的速度。
我输入了一个鼠标移动事件,我想我在下面找到了它们之间的 Angular :
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等,介于两者之间。
然后,我在同一事件中计算了距离,并更改了速度以反射(reflect)该距离,从而将其上限设置为最大速度:
var distance = Math.sqrt( a*a + b*b );
var maxSpeed = 20;
balls[0].vector.length = (distance/30 > maxSpeed) ? maxSpeed : distance/30;
因此,香港专业教育学院测试了速度,因此效果非常理想。当我从较早的 Angular 给球一个 Angular 时,它会在各种方向上运动。速度仍然有效,只是球朝错误的方向前进,我不确定我做错了什么。
最佳答案
坦白说,您不需要Trig函数。您所需要的只是好的毕达哥拉斯定理。
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;
引入力和惯性可以带来更多的乐趣。
关于javascript - 使 Canvas 上的球缓慢移向鼠标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49806292/