スナップSVGアニメーションが期待どおりに機能しない

Question

最初に90度時計回りに回転してからx軸を単純にアニメーション化したい。ここで私はスナップSVGに

コードペンはここで見つけることができ

r.animate({ transform: 'r90, 100, 200' }, 1000, mina.easein, function() {  
    r.animate({transform: 't 100 0'}, 1000, mina.easein); 
    } 
); 

を使用しているJavascriptのコードは次のとおりです。期待通りの回転が行く https://codepen.io/gauravsingh_/pen/xOVGar

、しかし翻訳が問題であり、予想外です。

誰かが見て、ここで間違っていることを説明できますか？

Answer 1

トランスフォームは累積的ではないため、毎回フルトランスフォームを表現する必要があります。だから、

あなたは、この内部を必要とする第二コールバックが変換のために...

r.animate({transform: 't 100 0r90,100,200'}, 1000, mina.easein); 

ラファエルはT対Tとの相対的な変換を可能にするために使用するが、これはスナップではそうではありません。

したがって、r90,100,200を省略すると、設定されていないので、0に戻したいと仮定します。スナップショットは行列を使用するので、それよりも少し複雑ですが、おそらくそれを考える最良の方法です。

したがって、後続のアニメーションの進行に合わせて、変換、回転、スケーリングで変換文字列を作成します。