SVGによるベクターグラフィック(3) (5/5)

残るは、「色」と「座標」に関するアニメーション関係のタグです。それぞれ順に説明していきましょう。

<aniimateColor>タグ
色の変化に関するものです。これは、<animate>タグでattributeType="css" attributeName="fill"を指定して色を変化させるのと同じ働きをするものです。色の変化は非常によく用いられますので、このように独立したタグとなっているのでしょう。基本的な属性は、<animate>と同じで、<aniimateColor>独自に用意しなければならない属性はありません。

<animateTransform>タグ
これは、図形を座標変換するためのものです。先に、図形タグの説明で「transform」という属性について説明をしました。これにより、平行移動・拡大縮小・回転・変形といった座標変換を行うことが出来ました。

この<animateTransform>は、transform属性で使われた各種の変換をアニメーションするためのものです。これは以下のように記述をします。

<animateTransform type="変換の種類" ……略…… />

typeで変換の種類を指定することで、指定の形に変形をしていきます。それぞれの変化は、<animate>でおなじみのfrom, toといった属性で用意しておくことが出来ます。問題はtypeにどういう値が用意できるか、でしょう。これは以下のようなものになります。

translate――平行移動。from, toには位置情報を指定。
scale――拡大縮小。from, toには拡大率を指定。
rotate――回転。from, toには角度を指定。
skewX, skewY――変形。from, toには変形角度を指定。

実際の利用例をあげておきましょう。下のリスト欄に掲載したサンプルは、ページを表示してから５秒経過すると、図形が次第に赤から青へと変化しながら、ページの左上へと縮小し消えていきます。

――以上、<animate>, <set>, <animateMotion>, <animateColor>, <animateTransform>といったアニメーション関係タグの基本的な使い方について説明をしました。特に複雑な動きになると、なかなかこれらを使いこなすのは難しくなります。実際にタグを書いて試して、どう変化するかを確認してみましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" 
	fill="red" stroke-width="0px">
	<animateColor attributeName="fill" attributeType="css"
		to="blue" begin="5s" dur="5s" fill="freeze"/>
	<animateTransform attributeName="transform"
		attributeType="XML" type="scale" to="0"
		begin="5s" dur="5s" fill="freeze"/>
</circle>