== アニメーション ==
 . 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)に拡大されます。