0

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

inserir a descrição da imagem aqui

1 Resposta 1

1

Analisando seu código identifiquei que essa função que converte a matrix para angle tem limitações após determinado ângulo, então sugiro uma abordagem mais simples salvando o ângulo em outro local, conforme exemplo abaixo:

$("#turn-spinner-right").click(function(){
  var sentido = 'right';
  spin(sentido);
});

$("#turn-spinner-left").click(function(){
  var sentido = 'left'; 
  spin(sentido);
});

function spin(direction){

  // Recuperamos o valor atual do ângulo, caso não exista, começamos com '0'
  var angle = $(".spinner").data('angle') || 0;

  // Aqui incrementamos ou decrementamos conforme a direção
  if (direction == 'left') {
    angle -= 45;
  } else {
    angle += 45;
  }

  // Aqui aplicamos o css para rotacionar o elemento ao novo ângulo
  $(".spinner").css("transform","rotate("+angle+"deg)");

  // Aqui salvamos o novo angulo no elemento para ser recuperado no próximo clique
  $(".spinner").data('angle', angle);
}
.spinner {
  width: 200px;
  height: 200px;
  background-color: #e3e3e3;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  transition: 0.5s;
  border: 5px dashed black;
  border-radius: 100%
}

.arrows {
  color: #484848;
  font-size: 48pt;
}
.arrows i {
  margin: 5px 15px 0px 15px;
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="spinner"></div>
<div class="arrows text-center">
  <i class="fa fa-arrow-circle-o-left" id="turn-spinner-left"></i>
  <i class="fa fa-arrow-circle-o-right" id="turn-spinner-right"></i>
</div>

2
  • realmente uma abordagem muito mais simples! Quando vi a conversão pra matrix, me atentei mais a resolvê-la antes. Commented 31/08/2017 às 16:19
  • poderia me mostrar onde esta a limitação nesta funcao de conversão? É possível mudarmos removendo esta limitação Commented 31/08/2017 às 16:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .