Javascript 使用atan2的角度动画

Javascript 使用atan2的角度动画,javascript,math,Javascript,Math,一个对象指向我的鼠标光标。我使用上面的代码来计算以弧度为单位的角度,并在几帧内“动画化”角度。但是,当角度变量从正变为负(以PI弧度)时,它将顺时针一直旋转到新的光标位置(如红色所示)。但是,我希望的路径是直接进入新角度(绿色箭头) 编辑: 这是我想到的,似乎有效。我可以改进吗 var diffx = (this.destination.x - pos.x), px = diffx / dist; var diffy = (this.destination.y - pos.y), py = d

一个对象指向我的鼠标光标。我使用上面的代码来计算以弧度为单位的角度,并在几帧内“动画化”角度。但是,当
角度
变量从正变为负(以PI弧度)时,它将顺时针一直旋转到新的光标位置(如红色所示)。但是,我希望的路径是直接进入新角度(绿色箭头)

编辑:

这是我想到的,似乎有效。我可以改进吗

var diffx = (this.destination.x - pos.x), px = diffx / dist;
var diffy = (this.destination.y - pos.y), py = diffy / dist;
var angle = Math.atan2(diffy, diffx) - rot.z;

rot.set(0, 0, rot.z + angle / 24);
if(atan-this.lastAtan<-Math.PI)
atan+=Math.PI*2;
else if(atan-this.lastAtan>Math.PI)
atan-=Math.PI*2;
this.lastAtan=atan;
var zrot=rot.z+(atan*12*Game.dt);
rot.set(0,0,zrot%(Math.PI*2));

您必须考虑atan2的输出仅在-pi到+pi的范围内。如果atan2的输出与之前角度之间的差值大于pi,则您知道发生了一些环绕,您必须通过加/减2*pi进行纠正。

对于一个旋转效果良好,但在我第二次旋转时效果相同。我假设无论我做了多少次旋转,我都必须不断地加/减2pi。你可以使用模运算符来避免重复的加/减-。谢谢,我有办法。我把它加到运算中,我能简化它吗?在这种情况下,模运算可能是多余的。我认为没有它你有一个很好的解决方案。在
if
语句之后分配
this.lastAtan=atan
才是它真正起作用的原因。我确实需要它,解释起来很复杂。如果没有它,对象将再次自行展开
if(atan-this.lastAtan<-Math.PI)
只对一次旋转有效,因为我只做过
atan+=Math.PI*2一次。在我当前的解决方案之前,我用一个名为
rotations
的内部变量尝试了它,并记录了它穿过边的次数,每个旋转增加了2pi。但是,我当前的方法不需要内部状态。
            if(atan - this.lastAtan < -Math.PI)
                atan += Math.PI * 2;
            else if(atan - this.lastAtan > Math.PI)
                atan -= Math.PI * 2;
            this.lastAtan = atan;

            var zrot = rot.z + (atan * 12 * Game.dt);
            rot.set(0, 0, zrot % (Math.PI * 2));