Cómo rotar una imagen en sentido horario o antihorario, ¿cuál de las dos es más corta?

Question

Estoy haciendo una página web que incluye un reloj con una flecha en el centro. Cuando el usuario hace clic en una hora, la flecha gira para apuntar a lo que hizo clic.

Estoy usando un jQuery image rotate plugin (jQueryRotate) para rotar la flecha.

Aquí está el código actual para calcular el número de grados para hacer girar:

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

Cuando el usuario hace clic en una de las horas, pasa num como un valor de 1 a 12.

Se funciona bien, pero el problema es que si la flecha apunta a la 1 en punto, y el usuario hace clic en las 11 en punto, la flecha gira en sentido horario 300 grados, cuando tendría más sentido girar 60 grados en el sentido contrario a las agujas del reloj.

Entonces, ¿cómo puedo escribir una ecuación para tomar la hora actual (num) y la hora presionada (sel), y generar un valor como número positivo o negativo, que es igual al número de grados para rotar que es más eficiente, en lugar de solo rotar en una dirección?

Cualquier consejo es apreciado. Hazme saber si tienes alguna pregunta. ¡Gracias!

Answer 1

Esto hace el trabajo más aburrido:

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

Devuelve - 180 a 180, dependiendo de qué rotación será la más corta.

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

Answer 2

Básicamente, la rotación más cercana siempre será inferior a 180 grados, por lo que si su ángulo es mayor que 180, simplemente resta 360 para obtener el ángulo negativo. Tomando tu propio ejemplo, si terminas con 300 grados, resta 360 para obtener -60 grados.

Así que añadir a su actual línea de código:

rot = num * gap; 

todo lo que necesita es:

if (rot > 180) 
    rot -= 360;