Criei um circulo para ser rotacionado 45 graus todas vez que eu clicar na seta, seja para direita ou para esquerda.
Para tal feito, estou utilizando CSS e jQuery. (SEGUE FIDDLE)
Fiz a seguinte função spin(direction)
para que englobasse quaisquer dos sentidos clicados na seta pelo usuários, tanto que me deparei com a questão de descobrir os graus de um elemento e saber apenas em formato matrix
, formato pelo qual o javascript retorna e pesquisando, adaptei uma função para conversão de matrix -> graus
. O código funciona perfeitamente!
A questão é, quando clico muitas vezes, seja para direita ou para esquerda, após um certo número de cliques, o círculo enrosca na rotação, e trava sempre com o movimento de "vai e vem", incrementando e diminuindo os graus, e não estou conseguindo quebrar este ciclo vicioso do evento. Disponibilizei acima o fiddle para que vocês possam simular o que estou interpretando aqui!
Abaixo segue meu código:
$("#turn-spinner-right").click(function(){
var sentido = 'right';
spin(sentido);
});
$("#turn-spinner-left").click(function(){
var sentido = 'left';
spin(sentido);
});
function spin(direction){
var transform = $(".spinner").css("transform");
console.log('MATRIX: '+transform);
var angle = convertMatrixToAngle(transform);
console.log(angle);
switch(direction){
case 'left':
if($(".spinner").css( "transform" ) == 'none'){
$(".spinner").css("transform","rotate(-45deg)");
} else {
var newAngle = angle-45;
console.log('novo angulo:'+newAngle);
$(".spinner").css("transform","rotate("+newAngle+"deg)");
}
break;
case 'right':
if($(".spinner").css( "transform" ) == 'none'){
$(".spinner").css("transform","rotate(45deg)");
} else {
var newAngle = angle+45;
console.log('novo angulo:'+newAngle);
$(".spinner").css("transform","rotate("+newAngle+"deg)");
}
break;
}
}