最初の回転後のSnapSVG回転の問題

Question

this codepenに小さなデモを作成しました。

4つのボタンのいずれかをクリックすると、オブジェクトが最初の回転では、次の...

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度だけ回転するかを指定します。

アニメーションを繰り返すだけの場合は、トランスフォームをスクラッチにリセットするだけで問題を回避できます（アニメーションの中央にあるボタンを押すと問題が発生することがあります）。

ring.attr('transform','') 

jsbin

あなたはもっと複雑なものをやってみたい、と以前の状態からアニメーション化する必要がある場合、私はアニメーションのわずかに異なる方法を使用して、要素にアニメーションではないが、スナップを使用します毎回変換文字列を作成してください。だから、インクルードは

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つの初期の引数を取り、その後、それらの間を補間することを渡しますこの関数は、前の変換（行列として保存されています）からアニメーション化することは気にしません。実数それぞれのアニメーションループが何を起こしているのかを示します。

終了する前にボタンを押すとアニメーションの途中で何をしたいかに応じて、funcが呼び出されるたびに（終了するのではなく）、回転を保存するだけです。