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

SVGでは、非常に簡単な操作で表示を変化させるアニメーション機能が用意されています。これを利用することで、図形のさまざまな状態をなめらかに変化させることができます。実際にやってみると、これは驚くほど簡単です。

下のリスト欄に、ごく単純なアニメーションの例をあげておきました。表示すると、赤い円がゆっくりと薄れていき、完全に消えるとまた真っ赤な状態に戻り、また次第に薄くなっていき……というのをひたすら繰り返し続けます。

ここでは、赤い円の図形の「透過度」の値をゆっくりと変化させることで次第に消えていくようにしていたのですね。これを行っているのが<animate>というタグです。リストを見ると、図形のタグ部分が、以下のようになっていることがわかるでしょう。

<circle ……略……>
    <animate ……略…… />
</circle>

このように、図形のタグの中に<animate>というタグを挟み込むことで、その図形に指定したアニメーションを組み込むことができるのです。この<animate>タグでは、以下のような属性を指定して変化させます。

<animate atributeType="属性の種類" attributeName="属性名"
    from="開始値" to="終了値" dur="表示時間" repeatCount="繰り返し回数" />

attributeType――変化させる属性の種類を指定するものです。これは"css"か"xml"のいずれかとなります。また「どっちかわからない」というときは"auto"で自動で判断させることもできます。
attributeName――変化させる属性の名前です。ここでは、スタイルシートの透過度の属性"opaciy"を指定してあります。
from, to――属性の値をいくつからいくつまで変化させるかを指定します。ここでは透過度を０〜１の範囲で変化させています。
dur――fromからtoまで変化するのにどれぐらいの時間をかけるかを指定します。ここでは"5s"として、５秒に設定してあります。
repeatCount――繰り返し回数です。エンドレスで繰り返すときは"indefinite"と指定します。

さあ、とりあえずこれだけで、「属性の値をゆっくり変化させる」というアニメーションは作れるようになりました。

(by. SYODA-Tuyano.)

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

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

※次第に消えていくアニメーション例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="300px" 
	id="svg" xmlns="http://www.w3.org/2000/svg">
	
	<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" 
		fill="red" stroke-width="0px">
		<animate attributeType="css" attributeName="opacity" 
         from="1" to="0" dur="5s" repeatCount="indefinite" />
	</circle>
</svg>