私はsnap.svgを学習しようとしていますが、変換プロパティについていくつかの疑問があります。私の質問はかなり愚かですが、ここにあります
次のサンプルコードでは、数字は何を意味していますか?
{"transform" : "t-10 0 s0 32 32"}
{"transform" : "r180 32 32"}
Sはスケールを表していると思いますが、animAfterとafterの違いは何ですか?私はSVGに非常に慣れていません。
変換形式は、一連の変換である文字列であるため、複数を連続して持つことができます。
編集:スナップでは最近、大文字と小文字が区別されないため、この部分では違いがありません(ただし、ラファエルが表示される場合があるので、注意する価値はあります) .jsコードと理解したい)、残りはまだ関連があるはずです...
T/t =平行移動(tは相対、Tは絶対)R/r =回転(rは相対、Rは絶対)S/s =スケール(sは相対、Sは絶対)
Snap.svgに十分な情報がない場合は、 Raphael変換のドキュメント を確認する価値があります。
場合によっては、Originの中心をオブジェクト自体、場合によっては0、0、特定のポイントの周りにしたい場合があるため、変換については、「Originの中心」を参照するものもあります。
t-10 0 s0 32 32
は、x、y -10,0を変換してからx、y、cx、cyをスケーリングし、cx 32の周りの方法でxを0、32をスケーリングします。
r180 32 32
は、ポイント32,32を中心に180度回転します。通常、値を区切るにはコンマまたはスペースを使用できます。
afterは、アニメーションの終了後に設定する「属性」値を表します。 animafterは、アニメーションの終了後に設定する「アニメーション」値を表します。
Snapは raphael と同じ構文を使用しているようです。 tは平行移動なので、xで-10単位平行移動します。 sはスケール、rは回転です。