jquery動畫步驟的起始值不正確

Question

我在使用jquery的動畫方法執行簡單的旋轉動畫時遇到了問題。我試圖以45度旋轉開始一個正方形，然後，當點擊一個按鈕時，將正方形再旋轉45度（以90度完成）。

但是，當我嘗試動畫時，在開始朝最終完成點（90度）前進之前，方塊先跳回到0的旋轉。

這似乎是因爲animate（）的「step」選項的「now」參數從0開始，而不是從元素的實際起點45度開始。

我在做什麼錯在這裏有什麼想法嗎？

http://jsfiddle.net/agentfitz/btz89/2/

// css 
.square { 
    transform: rotate(45deg); // starting point 
} 

// js 
$(".square").animate(
    { 
     rotation: 90, 
    },  
    { 
     step: function(now, tween) { 

      var $el = $(this); 

      if (tween.prop === "rotation") { 

       console.log(now); 
       $el.css('transform','rotate('+now+'deg)'); 

      } 

     }, 

     duration: 2000 
    } 

); 

Answer 1

請按照下面的例子：http://jqversion.com/#!/1GLob7P

Javascript代碼：

$("a").click(function(e){ 
    e.preventDefault(); 

    var initRotation = 0; 

    $(".square").animate(
     { 
      rotation: 45, // how many degrees do you want to rotate 
     },  
     { 
      start: function(promise){ 
       initRotation = getRotationDegrees($(this)); 
      }, 
      step: function(now, tween) { 

       var $el = $(this); 
       if (tween.prop === "rotation") { 

        var newRotation = initRotation + now; 

        $el.css('-webkit-transform','rotate('+newRotation+'deg)'); 
        $el.css('-moz-transform','rotate('+newRotation+'deg)'); 
        $el.css('transform','rotate('+newRotation+'deg)'); 
       } 

      }, 
      duration: 2000 
     } 
    ); 
}); 

function getRotationDegrees(obj) { 
    var matrix = obj.css("-webkit-transform") || 
    obj.css("-moz-transform") || 
    obj.css("-ms-transform")  || 
    obj.css("-o-transform")  || 
    obj.css("transform"); 
    if(matrix !== 'none') { 
     var values = matrix.split('(')[1].split(')')[0].split(','); 
     var a = values[0]; 
     var b = values[1]; 
     var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); 
    } else { var angle = 0; } 
    return (angle < 0) ? angle +=360 : angle; 
} 

Answer 2

您可以使用start選項自定義屬性初始值：

// css 
.square { 
    transform: rotate(45deg); // starting point 
} 

// js 

var startRotation = 45; 

$(".square").animate(
    { 
     rotation: 90, 
    },  
    { 
     start: function(promise) { 
      for (var i = 0; i < promise.tweens.length; i++) { 
       var tween = promise.tweens[i]; 
       if (tween.prop === "rotation") { 
        tween.start = startRotation; 
       } 
      } 
     }, 
     step: function(now, tween) { 
      var $el = $(this); 
      if (tween.prop === "rotation") { 
       console.log(now); 
       $el.css('transform','rotate('+now+'deg)'); 
      } 
     }, 
     duration: 2000 
    } 
);