当以特定角度转弯时，什么可能导致此“无人机”抖动？

Question

http://codepen.io/AlexKM/pen/JGEMjZ

turnTo: function (X, Y) {
    var angleDiff = 0,
        targetA = this.angleToPoint({
            x: X,
            y: Y
        }),
        dronA = this.angle;
    ///   If the angle difference can't be reached in a frame
    if (Math.abs(targetA - dronA) > this.turnSpeed * 1.25) {
        this.workingAngle = true;
        angleDiff = targetA - dronA;
        while (angleDiff < 0)
            angleDiff += 2 * Math.PI;
        while (angleDiff > 2 * Math.PI)
            angleDiff -= 2 * Math.PI;

        if (angleDiff >= Math.PI) {
            this.turningLeft = true;
        } else {
            this.turningRight = true;
        }

    } else ///  if the diff is negligible, reach it to save CPU
        this.angle = targetA;
},

更新处理实际转向的功能代码段：

    // apply turning
    if (this.turningLeft) {
        this.angle -= this.turnSpeed;
    }
    else if (this.turningRight) {
        this.angle += this.turnSpeed;
    }

红点-无人机面对
橙色点-指示无人机是否向左或向右旋转
青色点-表示无人机是否正在重新计算角度/正在执行三角测量

如果确实可以在testDrone.turnSpeed变量的一帧内到达鼠标角度，则代码DOES包含一个有助于平滑的部分。

大约有一半的时间，它会转动并正常工作。 另一半抖动，交替向左和向右旋转并连续计算触发。

这可能是什么原因？

Answer 1

不错的脚本。 :)

我认为抖动可能是显示器的（帧速率（ fps ）+处理时间）与刷新率之间差异的函数。 我之所以这样说，是因为有时它看起来很平滑，有时又有些肿块，而且就鼠标位置/移动而言，似乎并没有什么特别的模式。

您是否考虑过在setTimeout()使用requestAnimationFrame() setTimeout() ？ 请参阅MDN HERE ，其中指出...

这将要求您的动画函数在浏览器执行下一次重新绘制之前被调用。 回调次数通常为每秒60次，但按照W3C的建议，通常将与大多数Web浏览器中的显示刷新率匹配。

请参阅markE 对此StackOverflow问题的答复， 该问题涉及如何限制对特定帧速率的requestAnimationFrame调用。

希望能有所帮助。 :)

Answer 2

固定问题是确保角度实际上已重置为某些值，而不是在超过某个限制时被Pi增加或减少。 这是我的设计失误，因为对于“高于” Pi或“低于” Pi的角度，消除抖动不起作用

这是为了进入更新功能：

update: function (ctx) {
    // reset angles below and above 2pi
    while (this.angle > Math.PI)
        this.angle = -Math.PI;
    while (this.angle < -Math.PI)
        this.angle = Math.PI;