welcome: please sign in

"アニメーションの基本"のようなページがひとつ見つかりました。リダイレクトします。

メッセージを消す
location: アニメーション

アニメーション


パスに沿った動き

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


animateMotionの属性

begin

dur

fill

repeatCount

rotate


アニメーションの例

青い円をパスに沿って動かすサンプルです。

<defs>内に2つの定義があります。

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

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

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

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

となっています。

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

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

さらにその内側にある

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

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


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

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

サンプル1

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

サンプル2

animateを2つ使って、widthとheightを別々に変化させています。

サンプル3

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

サンプル4

animateColorを2つ使って、fillとstrokeを変化させています。

サンプル5

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