選擇最短旋轉排列兩個圖像

Question

我一直在努力解決這個問題一段時間了，儘管起初它似乎並不困難。

基本上我在屏幕上有一個由javascript動態旋轉的三角形。在每一幀動畫中，三角形都會嘗試在「正確方向」旋轉1度，以便它的小尖頭指向屏幕上的另一個div，我可以用箭頭鍵移動。這個三角形具有以下CSS屬性

#triangle { 
    position: absolute; 
    left: x; 
    top: y; 
    -webkit-transform: rotate(degrees) 
} 

我可以使三角形的點跟隨DIV相當漂亮，但我無法弄清楚如何使點始終以最短的旋轉。有時它會以「錯誤」的方向旋轉355度，而不是右邊的5度。

我有點卡住了。有人能幫我解決這個問題嗎？

謝謝！

Answer 1

我會嘗試這樣的事：

function optimal_angle(degrees) { 
    degrees = degrees % 360; 

    if (degrees > 180) { 
    return degrees - 360; 
    } else { 
    return degrees; 
    } 
} 

和一些測試：

> optimal_angle(355); 
-5 
> optimal_angle(-5); 
-5 
> optimal_angle(124373984); 
104 

如果你仔細想想，你最可以在任何方向轉動180度。因此，要「優化」一個角度，可以刪除重複的旋轉（degrees % 360），如果角度大於180度，則轉向另一個方向。