back
SVGによるベクターグラフィック(2) (5/5)
■スクリプトでグラフィックを動かす
基本的なSVGグラフィック・オブジェクトの操作がわかってきたら、後はいろいろな応用の仕方を理解していくだけですね。一例として、スクリプトを使ってグラフィックをアニメーションさせてみましょう。
下に簡単な例をあげておきます。アニメーションといっても、ここでは図形が伸びたり縮んだりするだけのシンプルなものですが、まぁその基本的なやり方ぐらいはわかるでしょう。
ここでは、タイマーを使ってアニメーションを行っています（実はSVGでは別にアニメーションの機能があるのですが、今回は「スクリプトで動かす」ということについて説明をします）。JavaScriptでは、setInterval関数を使い、一定時間ごとに指定の処理を実行させることができます。これを利用し、ここではsetInterval(doFunc,50);というようにして、50ミリ秒ごとにdoFunc関数を呼び出すようにしています。doFuncでは、
1. document.getElementByIdで操作するタグのDOMオブジェクトを得る。
2. getAttributeで操作する属性の値を得る。
3. 取得した値をもとに、次に設定する値を計算する。
4. setAttributeで属性の値を設定する。
このようにして図形の属性を操作し、動かしています。このあたりの基本的な考え方は、HTML
の要素をタイマーで動かすのと全く同じであることがわかります。
実を言えば、SVGには、標準でもっと手軽にアニメーションするための仕組みが用意されているのです。これを使えば、面倒なスクリプトなど書かずに手軽にアニメーションすることができます。こうした仕組みについては、また別の機会に説明したいと思います。
では、SVGにはアニメーションの機能があるのだから、このようにJavaScriptで動かす方法は不要なのか？ 実は、そういうわけでもありません。ここでは規則的に計算をさせていますが、例えばマウス関連のイベントを使い、マウスポインタの位置などに応じて動かすような場合、SVGに用意されているアニメーションだけではうまく対応できません。例えば、「マウスポインタにくっついて動きまわる図形」などは、あらかじめ用意しておいたアニメーション機能では対応不能です。
こうしたダイナミックな動きが求められるアニメーションでは、やはりJavaScriptで細かく属性を操作して動かす手法を使うことになります。決して覚えておいて無駄になることはありませんよ。
下に簡単な例をあげておきます。アニメーションといっても、ここでは図形が伸びたり縮んだりするだけのシンプルなものですが、まぁその基本的なやり方ぐらいはわかるでしょう。
ここでは、タイマーを使ってアニメーションを行っています（実はSVGでは別にアニメーションの機能があるのですが、今回は「スクリプトで動かす」ということについて説明をします）。JavaScriptでは、setInterval関数を使い、一定時間ごとに指定の処理を実行させることができます。これを利用し、ここではsetInterval(doFunc,50);というようにして、50ミリ秒ごとにdoFunc関数を呼び出すようにしています。doFuncでは、
1. document.getElementByIdで操作するタグのDOMオブジェクトを得る。
2. getAttributeで操作する属性の値を得る。
3. 取得した値をもとに、次に設定する値を計算する。
4. setAttributeで属性の値を設定する。
このようにして図形の属性を操作し、動かしています。このあたりの基本的な考え方は、HTML
の要素をタイマーで動かすのと全く同じであることがわかります。
実を言えば、SVGには、標準でもっと手軽にアニメーションするための仕組みが用意されているのです。これを使えば、面倒なスクリプトなど書かずに手軽にアニメーションすることができます。こうした仕組みについては、また別の機会に説明したいと思います。
では、SVGにはアニメーションの機能があるのだから、このようにJavaScriptで動かす方法は不要なのか？ 実は、そういうわけでもありません。ここでは規則的に計算をさせていますが、例えばマウス関連のイベントを使い、マウスポインタの位置などに応じて動かすような場合、SVGに用意されているアニメーションだけではうまく対応できません。例えば、「マウスポインタにくっついて動きまわる図形」などは、あらかじめ用意しておいたアニメーション機能では対応不能です。
こうしたダイナミックな動きが求められるアニメーションでは、やはりJavaScriptで細かく属性を操作して動かす手法を使うことになります。決して覚えておいて無駄になることはありませんよ。
(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" style="position:absolute"
xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript">
<![CDATA[
var dw = 10;
var timer = setInterval(doFunc,50);
function doFunc(){
var obj = document.getElementById('rect1');
var w = obj.getAttribute("width") * 1;
w += dw;
dw = (w > 200 | w < 50) ? dw * -1 : dw;
obj.setAttribute('width',w);
}
]]>
</script>
<g fill="red" stroke="blue" stroke-width="2px">
<rect id="rect1" x="50px" y="50px" width="100" height="100" />
</g>
</svg>
| << 前へ |