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

■操作する属性について

<animate>タグは、基本的には、ただ属性を指定するだけで簡単なのですが、注意しておきたいのは「attributeName」です。例えば、グラフィックをゆっくり動かしていくアニメーションをつくろうと考えたとしましょう。

下のリスト欄に、動かない例と動く例をあげておきました。違いがわかりますか？　１つ目のものは、「位置を動かす」というのに、つい「スタイルシートの位置に関する属性」を考えてしまったケースです。位置を動かすんだからattributeType="xml" attributeName="cx"とすればいいだろう……と考えると失敗します。

SVGでは、位置や大きさといった情報は、XMLの図形タグに用意される属性で指定されます。したがって、アニメーションするならattributeType="xml" attributeName="cx" というように指定しなければいけないのです。「XMLの属性か、スタイルシートの属性か」は、慣れないと混乱しがちです。図形タグに属性として用意されているものはXMLの属性、style属性に記述して設定されるものがスタイルシートの属性です。間違えないようにしましょう。

■複数のアニメーション情報を設定する

では、もう少し複雑なアニメーションを作成してみましょう。例えば、複数の属性を同時に操作する場合は？　これは、<animate>タグを複数置くことで対応できます。では、例えば「図形を左から右に動かし、また右から左に戻す」というようなときはどうするのでしょう？

こういう時には、「values」という属性を利用します。アニメーションで変化させる値は、fromとtoで開始値と終了値を指定しましたが、valuesは複数の値を用意することが出来ます。例えば、

values="0;100;0"

このように設定すると、属性の値がゼロから100になり、またゼロに戻る、というように変化させることができます。valuesでは、このように基準となる値をカンマで区切って記述することで、それらの１つ１つの値に変化していくようなアニメーションが可能です。

リスト欄に、簡単な利用例をあげておきました。縦横の位置と図形の色が複雑に変化していきます。こうした動きも、<animate>タグを使えば、まったくのノンプログラミングで実現できてしまいます。

(by. SYODA-Tuyano.)

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

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

※図形が動くアニメーション例（動かない例）

<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" 
	fill="red" stroke-width="0px">
	<animate attributeType="css" attributeName="x" 
			 from="100" to="200" dur="5s" repeatCount="1" />
</circle>


※図形が動くアニメーション例（動く例）

<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" 
	fill="red" stroke-width="0px">
	<animate attributeType="xml" attributeName="cx" 
			 from="100" to="200" dur="5s" repeatCount="1" />
</circle>


※より複雑なアニメーション例

<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" 
	fill="red" stroke-width="0px">
	<animate attributeType="xml" attributeName="cx" 
			 from="100" to="200" dur="5s" repeatCount="indefinite" />
	<animate attributeType="xml" attributeName="cy" 
			 from="100" to="200" dur="3s" repeatCount="indefinite" />
	<animate attributeType="css" attributeName="fill"
		values="#FF0000;#00FF00;#FF0000" 
		dur="7s" repeatCount="indefinite" />
</circle>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail