如果圖像完全旋轉，則旋轉

Question

我目前使用jQuery animate來旋轉圖像。這裏是我的代碼：

var wheel = $('#wheel'); 
wheel.on('click', function() { 
    var angle = 500; 

    $(wheel).animate({}, { 
     start: function() { 
      if (!isSpin) { 
       console.log('Start spinning'); 
       wheel.css('transform', 'rotate(' + angle + 'deg)'); 
       isSpin = true; 
      } 
     }, 
     complete: function() { 
      console.log('Finish spinning'); 
      isSpin = false; 
     } 
    }); 
}); 

我想如果圖像旋轉完成旋轉圖像，但它似乎裏面全功能不能正常工作的代碼期望的，它運行時的圖像仍在轉動。如何檢測圖像是否完成旋轉？

Answer 1

運行loop中的轉換。

function AnimateRotate(angle,repeat) { 
 
    var duration= 1000; 
 
    setTimeout(function() { 
 
     if(repeat && repeat == "infinite") { 
 
      AnimateRotate(angle,repeat); 
 
     } else if (repeat && repeat > 1) { 
 
      AnimateRotate(angle, repeat-1); 
 
     } 
 
    },duration)  
 
    var $elem = $('#wheel'); 
 

 
    $({deg: 0}).animate({deg: angle}, { 
 
     duration: duration, 
 
     step: function(now) { 
 
      $elem.css({ 
 
       'transform': 'rotate('+ now +'deg)' 
 
      }); 
 
     } 
 
    }); 
 
} 
 

 
var wheel = $('#wheel'); 
 
wheel.on('click', function() { 
 
    AnimateRotate(360,"infinite"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="wheel" src="https://opensource.org/files/google.png">