SVGによるベクターグラフィック(3) (2/5)
作成:2011-06-01 08:24
更新:2011-06-01 08:24
更新:2011-06-01 08:24
■操作する属性について
<animate>タグは、基本的には、ただ属性を指定するだけで簡単なのですが、注意しておきたいのは「attributeName」です。例えば、グラフィックをゆっくり動かしていくアニメーションをつくろうと考えたとしましょう。
下のリスト欄に、動かない例と動く例をあげておきました。違いがわかりますか？ １つ目のものは、「位置を動かす」というのに、つい「スタイルシートの位置に関する属性」を考えてしまったケースです。位置を動かすんだからattributeType="xml" attributeName="cx"とすればいいだろう……と考えると失敗します。
SVGでは、位置や大きさといった情報は、XMLの図形タグに用意される属性で指定されます。したがって、アニメーションするならattributeType="xml" attributeName="cx" というように指定しなければいけないのです。「XMLの属性か、スタイルシートの属性か」は、慣れないと混乱しがちです。図形タグに属性として用意されているものはXMLの属性、style属性に記述して設定されるものがスタイルシートの属性です。間違えないようにしましょう。
では、もう少し複雑なアニメーションを作成してみましょう。例えば、複数の属性を同時に操作する場合は？ これは、<animate>タグを複数置くことで対応できます。では、例えば「図形を左から右に動かし、また右から左に戻す」というようなときはどうするのでしょう？
こういう時には、「values」という属性を利用します。アニメーションで変化させる値は、fromとtoで開始値と終了値を指定しましたが、valuesは複数の値を用意することが出来ます。例えば、
リスト欄に、簡単な利用例をあげておきました。縦横の位置と図形の色が複雑に変化していきます。こうした動きも、<animate>タグを使えば、まったくのノンプログラミングで実現できてしまいます。
下のリスト欄に、動かない例と動く例をあげておきました。違いがわかりますか？ １つ目のものは、「位置を動かす」というのに、つい「スタイルシートの位置に関する属性」を考えてしまったケースです。位置を動かすんだから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>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る