如何顺时针或逆时针旋转图像，以较短者为准？

Question

I'm making a web page that includes a clock with an arrow in the center. When the user clicks on an hour, the arrow rotates to point to what he/she has clicked.

I'm using a jQuery image rotate plugin (jQueryRotate) to rotate the arrow.

Here is the current code to compute the number of degrees to rotate:

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;  
}  

When the user clicks one of the hours, it passes num as a value of 1 through 12.

It works fine, but the problem is that if the arrow is pointing to 1 o'clock, and the user clicks 11 o'clock, the arrow rotates clockwise 300 degrees, when it would make more sense to rotate 60 degrees counterclockwise.

So, how can I write an equation to take the current hour (num) and the hour clicked (sel), and output a value as a positive or negative number, which equals the number of degrees to rotate that is most efficient, rather than just rotate only in one direction?

Any advice is appreciated. Let me know if you have any questions. Thanks!

Answer 1

Basically the closest rotation will always be less than 180 degrees, so if your angle is greater than 180, just subtract 360 from it to get the negative angle. Taking your own example, if you end up with 300 degrees, subtract 360 to get -60 degrees.

So to add to your current line of code:

rot = num * gap;

all you need is:

if (rot > 180)
  rot -= 360;

Answer 2

This does the rather boring job:

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);
}

It returns -180 to 180, depending on which rotation will be the shortest.

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