アニメーション

animateMotion

animate

animateColor

set

パスに沿った動き

物体をパスにそって動かすにはつぎのように書きます。

<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>内に２つの定義があります。

１番目は<path>で形は４角形です。 どのように動くかを<path>で記述します。

２番目は<g>で形は青い円です。 動かす物体です。複雑な形でもかまいません。 <g>を使ってまとめ、名前をつけています。

</defs>より後ろにあるのが実際に表示される部分です。 ここには<use>が１つだけあります。

今回の<use>はいつもの単独タグではなく、開始タグと終了タグがあります。 動かす物体はuseの属性として指定します。ここでは

xlink:href="#maru" x="0" y="0"

となっています。

<use>の内側に<animateMotion>が入っています。 これがアニメーションの指定です。

begin="0s" dur="4s"

で時間の指定を０秒目から４秒目としています。

さらにその内側にある

<mpath xlink:href="#path1"/>

でパスを参照し、動きの線を指定しています。

この<use>全体の意味は 「図形maruを０秒目から４秒目の間に、path1にそって動かす」 になります。

いろいろなアニメーション

動きだけでなく、大きさを変えたり、向きを変えるなどいろいろなアニメーションが可能です。

サンプル１

<rect x="10" y="10" width="200" height="20"> <animate attributeName="width" attributeType="XML" from="200" to="20" begin="0s" dur="5s" /> </rect>

長方形の幅を２００から２０までだんだん小さく変化させるものです。 attributeNameでどの属性を変化させるのか指定し、 値はfromとtoで、時間はbeginとdurで指定します。

サンプル２

<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を２つ使って、widthとheightを別々に変化させています。

サンプル３

<text x="50" y="50" style="visibility:hidden;"> <set attributeName="visibility" attributeType="CSS" to="visible" begin="5s" dur="1s" fill="freeze" /> Hello </text>

一定時間後にHelloと表示します。 animateではなくsetを使って、属性の値を変えています。

サンプル４

<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を２つ使って、fillとstrokeを変化させています。

サンプル５

<use xlink:href="#name" transform="translate(0,100)"> <animateTransform attributeType="XML" attributeName="transform" type="scale" from="1" to="2 5" begin="0s" dur="5s" /> </use>

５秒後にscale(2 5)に拡大されます。