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

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包含一个有助于平滑的部分。

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

这可能是什么原因？

最佳答案

不错的脚本。 :)

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

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

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

有关限制requestAnimationFrame调用特定帧速率的信息，请参见markE对this StackOverflow question的响应。

希望能有所帮助。 :)