6. ダイナミックSVG2

2005.12.15　株式会社四次元データ　藤本将光

前章では、animate要素のうち、animete,animateMotion,animateColorについて説明しましたが、本章では、animateTransform要素とアニメーションの動き方を設定する属性について説明します。

6.1. animate要素2

animateTransform

transform属性を変化することによって、アニメーションにおいて、拡大・縮小、回転、歪みを行います。

　・type属性 ： attributeNameが"transform"の場合、値として、Transform属性（translate/scale/rotate/skewX/skewY)を設定できる。

  (サンプルのソース)
     <svg width="300" height="300" >
     <rect x="0" y="0" width="300" height="300" fill="yellow"/>
     <rect x="100" y="100" width="50" height="50" fill="red">
     <animateTransform attributeName="transform" type="scale" from="0.2" to="1"
                                      additive="sum" dur="5s" repeatCount="2" />
     </rect>

この例では四角形の大きさが0.2倍から1倍にまで、5秒間をかけて拡大します。また、repeatCountの指定によって2回アニメーションが繰り返される設定です。

6.2. 動き方の設定

calcMode属性によって、アニメーションの変化の仕方や変化速度を設定することができます。
値には、以下のものがあります。

1. discrete : 不連続な変化を示し、ある値から別の値にジャンプする。KeyTime属性によって、時間を調整する。
2. linear : 一定時間、直線的な値の変化を示す。KeyTime属性によって、時間を調整する。
3. paced : 一定のペースになるよう自動で調節して、滑らかに値が移る。
4. spline : 自作した3次ベジェ、スプラインの時間関数を用いることによって、値を変化させる。この際、keyTimes属性、keySppnes属性を利用する。

（サンプルのソース）
    <svg width="300" height="300" >
    <rect x="0" y="0" width="300" height="300" fill="yellow"/>
    <rect x="100" y="100" width="50" height="50" fill="red">
    <animateTransform attributeName="transform" type="scale" values="0.2;0.5;1" 
          additive="sum" dur="5s" keyTimes="0.1;0.3;0.8" calcMode="discrete" repeatCount="2" />
    </rect>
    </svg>

この例では上記のanimateTransformの例にcalcModeとしてdiscrete値を指定することによって、不連続に拡大を行っています。具体的には、赤色の四角形が0.5（5×0.1）秒後に0.2倍、1.5（5×0.3）秒後に0.5倍、4（5×0.8）秒後に1倍へと不連続な拡大をしています。