當以特定角度轉彎時，什么可能導致此“無人機”抖動？

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;