Problem when rotating an object continuously

0

I created a circle to be rotated 45 degrees every time I click the arrow, either right or left.

For this done, I'm using CSS and jQuery. ( SEGUE FIDDLE )

I made the following function spin(direction) to include any of the directions clicked on the arrow by the users, so much so that I came across the issue of discovering the degrees of an element and knowing only in matrix format, format by which javascript return and search, I have adapted a function for matrix -> graus conversion. The code works perfectly!

The point is, when I click many times, either right or left, after a certain number of clicks, the circle twists in the rotation, and always hangs with the "come and go" movement, increasing and decreasing degrees , and I can not break this vicious cycle of the event. I made the fiddle above so that you can simulate what I am interpreting here!

Below is my code:

$("#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;
    }
}

    
asked by anonymous 31.08.2017 / 15:43

1 answer

1

By analyzing your code I have identified that this function that converts matrix to angle has limitations after a certain angle, so I suggest a simpler approach by saving the angle in another location, as shown below:

$("#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><linkhref="//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><linkhref="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><divclass="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>
    
31.08.2017 / 17:37