如何将图像顺时针或逆时针旋转，以较短的方式旋转？

Question

我正在制作一个包含中心箭头时钟的网页。当用户点击小时数时，箭头会旋转指向所选时间。

我使用了jQuery图像旋转插件（jQueryRotate）来旋转箭头。

以下是当前计算旋转角度的代码：

var numTiles = $("ul li").size(); // Number of tiles is however many are listed in the UL, which is 12  
var sel = 0; // Default hour selection  
var rot = 0; // Default rotation is at the top (0 degrees)  
var gap = 360 / numTiles; // Degrees between each tile

function rotateArrow(num) {  
  rot = num * gap;  
  $("#arrow").rotateAnimation(rot);  
  sel = num;  
}  

当用户点击其中一个小时时，它会将num作为1到12的值传递。

这个功能很好，但问题在于，如果箭头指向1点钟，并且用户单击11点钟，那么箭头顺时针旋转300度，更合理的做法应该是逆时针旋转60度。

因此，我该如何编写一个方程式，以接受当前小时（num）和所选小时（sel），并输出一个正数或负数，其值等于最高效的旋转角度，而不只是单一方向的旋转？

非常感谢任何建议。如果您有任何问题，请告诉我。谢谢！

- Wes

Answer 1

基本上，最接近的旋转角度始终小于180度，因此如果您的角度大于180度，只需从中减去360度即可得到负角度。以您自己的示例为例，如果您得到了300度，则减去360度即可得到-60度。

因此，在您当前的代码行中添加以下内容：

rot = num * gap;

你所需要的是：

if (rot > 180)
  rot -= 360;

- casablanca

Answer 2

这个执行相当枯燥的工作：

function diff(x, y) {
    var a = (x * Math.PI / 180) - Math.PI;
    var b = (y * Math.PI / 180) - Math.PI;
    return Math.atan2(Math.sin(b - a), Math.cos(b - a)) * (180 / Math.PI);
}

它返回-180到180之间的值，具体取决于哪个旋转角度是最短的。

diff(360, 20)
> 19.999999999999993
diff(20, 360)
> -19.999999999999993
diff(0, 160)
> 160
diff(0, 190)
> -170

- Ivo Wetzel

---

Ivo，就是这样！非常感谢！我加入了Math.round()只是为了将其转换为整数，供以后参考。 - Wes