back
SVGによるベクターグラフィック(3) (4/5)
■パスとアニメーションについて
この他にも、SVGにはアニメーション関係のタグがいくつか用意されています。これらについてもまとめて整理しておきましょう。まずは、<animateMotion>からです。
これは、指定したパスに従って図形をアニメーションさせるためのものです。これは以下のような形で記述されます。
このpathは、線分の形状を記述したものです。SVGでは、線分の形状を記述した図形というのがあります。<path>というタグで、これは以下のような形で記述されます。
では、パスのデータというのはどういうものか。これは、基本的に「線分図形の位置の値を順に記述したもの」になります。例えば、"0,0 100,100 200,200"という具合に、１つ１つの位置（横位置と縦位置をカンマで続ける）の値をスペースでつなぎあわせたものになります。
ただし、単純に位置をつなげただけでは、かくかくした多角形のようなものにしかなりません。パスのデータでは、直線以外にもさまざまな形状を記号により記述することができるようになっているのです。例えば、"M100,100 L300,300"とすると、「100,100の地点まで移動し、300,300の地点まで直線を描く」という意味になります。記号と、その記号で必要となる位置の値をセットで記述していくのですね。
では、パスのデータではどのような記号が用意されているのでしょうか。ざっと以下に整理しましょう。
M 横, 縦――指定の位置まで移動。
L 横, 縦――現在位置から指定の位置まで直線を描いて移動。
H 横――現在位置から指定の位置まで水平線を描いて移動。
V 縦――現在位置から指定の位置まで垂直線を描いて移動。
T 横,縦――現在位置から指定の位置まで２次ベジエ曲線を描いて移動。
Q 横1,縦1 横2,縦2――現在位置から制御点を経由して指定の位置に達する２次ベジエ曲線を描いて移動。
S 横1,縦1 横2,縦2――現在位置から制御点を経由して指定の位置に達する３次ベジエ曲線を描いて移動。
横1,縦1 横2,縦2 横3,縦3――現在位置から２つの制御点を経由して指定の位置に達する３次ベジエ曲線を描いて移動。
A 横半径,縦半径 回転角度 フラグ1,フラグ2 横,縦――現在位置から最終的な横,縦の位置に達するような円弧を描いて移動。
Z――パスを閉じる。
中にはなんだかよくわからないものもあるでしょう。特に曲線関係のものはパラメータが多く、何がどうなっているのかわかりにくいことと思います。このようなものは、実際にひたすらデータを書いて「どう表示されるか」を確かめていけば、なんとな〜くそれぞれの数値の働きがわかってくると思います。
では、下にごく簡単な例を挙げておきます。曲線のパスにしたがって図形が移動していくものです。ここでは、比較的扱いの簡単なQ記号による２次ベジエ曲線を使ってみました。ここでは、fill="freeze"という属性が<animateMotion>に用意されていますが、これは「アニメーション終了後にそのままの状態で停止する」という指定です。
これがないと、最初の状態に戻りますので、「アニメーションさせて、そのまま止めたい」という時にはこのfill="freeze"を用意しておくとよいでしょう。これは<animateMotion>に限らず、その他のアニメーションタグでも利用できます。
これは、指定したパスに従って図形をアニメーションさせるためのものです。これは以下のような形で記述されます。
<animateMotion path="パスのデータ" />この他、<animate>タグに用意されているdurやfrom、toなどの属性もそのまま引き継いで使うことが出来ます。この<animateMotion>タグのポイントは、「path」という属性でしょう。これを使って移動していく場所を順に指定することができるのです。
このpathは、線分の形状を記述したものです。SVGでは、線分の形状を記述した図形というのがあります。<path>というタグで、これは以下のような形で記述されます。
<path d="パスのデータ" ……略…… />id属性にパスのデータを記述することで、指定の線分図形を用意できます。<path>のid属性も、<animateMotion>のpath属性も、いずれも「パスの形状を記述したデータ」を値に指定します。
では、パスのデータというのはどういうものか。これは、基本的に「線分図形の位置の値を順に記述したもの」になります。例えば、"0,0 100,100 200,200"という具合に、１つ１つの位置（横位置と縦位置をカンマで続ける）の値をスペースでつなぎあわせたものになります。
ただし、単純に位置をつなげただけでは、かくかくした多角形のようなものにしかなりません。パスのデータでは、直線以外にもさまざまな形状を記号により記述することができるようになっているのです。例えば、"M100,100 L300,300"とすると、「100,100の地点まで移動し、300,300の地点まで直線を描く」という意味になります。記号と、その記号で必要となる位置の値をセットで記述していくのですね。
では、パスのデータではどのような記号が用意されているのでしょうか。ざっと以下に整理しましょう。
M 横, 縦――指定の位置まで移動。
L 横, 縦――現在位置から指定の位置まで直線を描いて移動。
H 横――現在位置から指定の位置まで水平線を描いて移動。
V 縦――現在位置から指定の位置まで垂直線を描いて移動。
T 横,縦――現在位置から指定の位置まで２次ベジエ曲線を描いて移動。
Q 横1,縦1 横2,縦2――現在位置から制御点を経由して指定の位置に達する２次ベジエ曲線を描いて移動。
S 横1,縦1 横2,縦2――現在位置から制御点を経由して指定の位置に達する３次ベジエ曲線を描いて移動。
横1,縦1 横2,縦2 横3,縦3――現在位置から２つの制御点を経由して指定の位置に達する３次ベジエ曲線を描いて移動。
A 横半径,縦半径 回転角度 フラグ1,フラグ2 横,縦――現在位置から最終的な横,縦の位置に達するような円弧を描いて移動。
Z――パスを閉じる。
中にはなんだかよくわからないものもあるでしょう。特に曲線関係のものはパラメータが多く、何がどうなっているのかわかりにくいことと思います。このようなものは、実際にひたすらデータを書いて「どう表示されるか」を確かめていけば、なんとな〜くそれぞれの数値の働きがわかってくると思います。
では、下にごく簡単な例を挙げておきます。曲線のパスにしたがって図形が移動していくものです。ここでは、比較的扱いの簡単なQ記号による２次ベジエ曲線を使ってみました。ここでは、fill="freeze"という属性が<animateMotion>に用意されていますが、これは「アニメーション終了後にそのままの状態で停止する」という指定です。
これがないと、最初の状態に戻りますので、「アニメーションさせて、そのまま止めたい」という時にはこのfill="freeze"を用意しておくとよいでしょう。これは<animateMotion>に限らず、その他のアニメーションタグでも利用できます。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" fill="red" stroke-width="0px"> <animateMotion path="M0,0 Q100,0 0,100 T100,100" dur="5s" fill="freeze"/> </circle>
| << 前へ | 次へ >> |