アニメーション
パスに沿った動き
物体をパスにそって動かすにはつぎのように書きます。
<use xlink:href="#動かす物体">
<animateMotion>
<mpath xlink:href="#動きのパス"/>
</animateMotion>
</use>
animateMotionの属性
begin
- アニメーションを始める時間を指定します。例えば begin="0s"
dur
- アニメーションの長さを指定します。例えば dur="5s"
fill
- アニメーションが終わったあと、物体の表示をどうするか指定します。 指定しないと、useで指定した場所に描かれます。 fill="freeze"とすると最後の場所で止まります。
repeatCount
- 繰り返しの回数を指定します。例えば repeatCount="10" 限りなく繰り返すには repeatCount="indefinite" とします。
rotate
- 動かす物体の向きを指定します。 指定しないと、もとの向きのままで動きます。 パスの向きにしたがって向きを変えるには rotate="auto" とします。
アニメーションの例
青い円をパスに沿って動かすサンプルです。
<defs> <path id="path1" d="M 100 100 L 300 100 L 300 300 L 100 300 Z" /> <g id="maru">
<circle cx="0" cy="0" r="10" fill="blue" />
</g> </defs>
<use xlink:href="#maru" x="0" y="0">
<animateMotion begin="0s" dur="4s">
<mpath xlink:href="#path1"/>
</animateMotion>
</use>
<defs>内に2つの定義があります。
1番目は<path>で形は4角形です。 どのように動くかを<path>で記述します。
2番目は<g>で形は青い円です。 動かす物体です。複雑な形でもかまいません。 <g>を使ってまとめ、名前をつけています。
</defs>より後ろにあるのが実際に表示される部分です。 ここには<use>が1つだけあります。
今回の<use>はいつもの単独タグではなく、開始タグと終了タグがあります。 動かす物体はuseの属性として指定します。ここでは xlink:href="#maru" x="0" y="0" となっています。
<use>の内側に<animateMotion>が入っています。 これがアニメーションの指定です。 begin="0s" dur="4s" で時間の指定を0秒目から4秒目としています。
さらにその内側にある <mpath xlink:href="#path1"/> でパスを参照し、動きの線を指定しています。
この<use>全体の意味は 「図形maruを0秒目から4秒目の間に、path1にそって動かす」 になります。
いろいろなアニメーション
動きだけでなく、大きさを変えたり、向きを変えるなどいろいろなアニメーションが可能です。
サンプル1 <rect x="10" y="10" width="200" height="20">
<animate attributeName="width" attributeType="XML"
- from="200" to="20"
begin="0s" dur="5s" />
- from="200" to="20"
</rect> 長方形の幅を200から20までだんだん小さく変化させるものです。 attributeNameでどの属性を変化させるのか指定し、 値はfromとtoで、時間はbeginとdurで指定します。
サンプル2 <rect x="10" y="10" width="200" height="20">
<animate attributeName="width" attributeType="XML"
from="200" to="20" begin="0s" dur="5s" />
<animate attributeName="height" attributeType=XML"
from="50" to="100" begin="0s" dur="10s" />
</rect> animateを2つ使って、widthとheightを別々に変化させています。
サンプル3 <text x="50" y="50" style="visibility:hidden;">
<set attributeName="visibility" attributeType="CSS"
- to="visible"
begin="5s" dur="1s" fill="freeze" />
- to="visible"
- Hello
</text> 一定時間後にHelloと表示します。 animateではなくsetを使って、属性の値を変えています。
サンプル4 <circle cx="50" cy="50" r="30" style="fill:#fff; stroke:#000;">
<animateColor attributeName="fill"
begin="5s" dur="3s" from="#880" to="#8ff" fill="freeze" />
<animateColor attributeName="stroke"
begin="5s" dur="3s" form="#088" to="#000" fill="freeze" />
</circle> animateColorを2つ使って、fillとstrokeを変化させています。
サンプル5 <use xlink:href="#name" transform="translate(0,100)">
<animateTransform attributeType="XML"
- attributeName="transform" type="scale" from="1" to="2 5"
begin="0s" dur="5s" />
- attributeName="transform" type="scale" from="1" to="2 5"
</use> 5秒後にscale(2 5)に拡大されます。