第一次旋轉後SnapSVG旋轉問題

Question

我在this codepen中創建了一個小型演示。

當點擊任何四個按鈕，對象是使用以下...

function rotateTo(angle) { 
     var ring = paper.select("#INNER_RING"); 
     var bbox = ring.getBBox(); 
     var cx = bbox.cx; 
     var cy = bbox.cy; 

     var trans = 'r' + angle + ' ' + cx + ' ' + cy; // + 's1,1,' + cx + ',' + cy; 
     console.log(trans); 

     ring.stop().animate({ 
      transform: trans 
     }, 
     750, 
     mina.linear, 
     function() { 
      settings.currentRotation = angle; 
     }); 
    } 

在第一旋轉旋轉到正確的位置，一切都很好。但是，隨後的旋轉不僅會旋轉，而且會隨着旋轉的發生而變大。該對象確實以最終位置結束，但不需要縮放。

作爲第一次轉換的一部分，可能會導致後續的操作發生什麼？

Answer 1

以前矩陣的動畫矩陣通常會非常混亂，因爲他們通常不會做我們認爲他們會做的事情（我問過過去here中的一個類似問題，這可能是有用的，動畫如果你想更深入的瞭解）。在第一個動畫開始時，沒有變換矩陣來進行動畫處理，所以它非常簡單。

但是，在第一個動畫結束時，會有一個變換矩陣應用於導致問題的元素，因爲它試圖從最後一個矩陣開始動畫。

在後續的按鈕按下時，您實際上想要做什麼並不十分清楚。無論你想旋轉90度的「另一個」，還是再次從頭開始旋轉90度。

如果您只是想重複動畫，您可以將轉換重置爲scratch，這只是解決了問題（但請注意，如果按中間動畫按鈕，可能會出現問題）。

ring.attr('transform','') 

jsbin

如果你想要做更復雜的事情，需要從以前的狀態，以動畫，我會用動畫的一個稍微不同的方法，而不是動畫的元素，但使用捕捉.animate並每次構建您的變換字符串。因此，可以可以看起來更像這個...

var rotateFrom = settings.currentRotation; 
var rotateTo = rotateFrom + parseInt(angle) 

Snap.animate(rotateFrom, rotateTo, function(val) { 
    ring.transform('r' + val + ',' + cx + ',' + cy) 
}, 750, mina.linear, function() { 
    settings.currentRotation = rotateTo; 
}); 

jsbin2

Snap.animate（）採用2個是一個初始值和最終值的初始參數，然後將它們之間進行插值，那路過作爲'val'來傳遞函數。可以找到的文檔here

這樣，您不必關心以前的轉換（它們存儲爲矩陣）的動畫效果，並且您可以控制真實每個動畫循環發生什麼的細節。

你可能只需要調整它，並在每次調用func時（而不是隻在它完成時）存儲旋轉，這取決於你想在中間動畫完成之前按下按鈕的動作。