22008-08-22 04:52:41masahiko12008-08-22 04:45:53masahiko

animateMotion animate animateColor set

物体をパスにそって動かすにはつぎのように書きます。 ]]> animateMotionの属性 begin アニメーションを始める時間を指定します。例えば begin="0s" dur アニメーションの長さを指定します。例えば dur="5s" fill アニメーションが終わったあと、物体の表示をどうするか指定します。 指定しないと、useで指定した場所に描かれます。 fill="freeze"とすると最後の場所で止まります。 repeatCount 繰り返しの回数を指定します。例えば repeatCount="10" 限りなく繰り返すには repeatCount="indefinite" とします。 rotate 動かす物体の向きを指定します。 指定しないと、もとの向きのままで動きます。 パスの向きにしたがって向きを変えるには rotate="auto" とします。 アニメーションの例 青い円をパスに沿って動かすサンプルです。 ]]><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にそって動かす」 になります。

動きだけでなく、大きさを変えたり、向きを変えるなどいろいろなアニメーションが可能です。 サンプル１ ]]>長方形の幅を２００から２０までだんだん小さく変化させるものです。 attributeNameでどの属性を変化させるのか指定し、 値はfromとtoで、時間はbeginとdurで指定します。 サンプル２ ]]>animateを２つ使って、widthとheightを別々に変化させています。 サンプル３ Hello ]]>一定時間後にHelloと表示します。 animateではなくsetを使って、属性の値を変えています。 サンプル４ ]]>animateColorを２つ使って、fillとstrokeを変化させています。 サンプル５ ]]>５秒後にscale(2 5)に拡大されます。