このページの本文へ

HTML5 SVGで作るシューティングゲーム (2/6)

2011年02月21日 13時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

JavaScriptでSVGアニメーション

 JavaScriptを使ってSVG図形をアニメーションさせてみましょう。JavaScriptではsetTimeout()かsetInterval()のタイマーを使ってアニメーションできます。

 サンプル2と同様に図形を回転させる場合は、以下のようにtransform属性にrotate()を使って角度を逐次指定していきます。

var poly = document.getElementById("myPoly");
var rot = 0;    // 回転角度
setInterval(function(){
poly.setAttribute("transform", "rotate("+rot+" 50 52)");
rot = rot - 1;
}, 10);

 実際のプログラムはサンプル3です。

【図4】fig04.png

ボタンをクリックすると図形が回転しはじめる

サンプル3[HTML]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>JavaScriptでSVGアニメーション</title> 
</head> 
<body>
<h1>JavaScriptでSVGアニメーション</h1>
<form>
<input type="button" id="change" value="回転">
</form>
<svg>
<polygon id="myPoly" fill="#FFF000" stroke="#FF0000" points="72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 " />
</svg>
<script type="text/javascript">
document.getElementById("change").addEventListener("click", function(){
var poly = document.getElementById("myPoly"); // 多角形(ポリゴン)
var rot = 0;    // 回転角度
setInterval(function(){
poly.setAttribute("transform", "rotate("+rot+" 50 52)");
rot = rot - 1;
}, 10);
}, true);
</script>
</body> 
</html>

 <anime>タグでは単純なアニメーション処理しかできませんが、JavaScriptを使うとより複雑なアニメーションもできます。サンプル4はテキストを1文字ずつ表示しながら変形させます。

テキストが変形しながら表示されていく

サンプル4[HTML]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>SVGアニメーション Text</title> 
</head> 
<body>
<h1>SVGアニメーション Text</h1>
<svg width="300px" height="300px">
<text id="myText" x="5" y="18">S</text>
</svg>
<script type="text/javascript">
var text = "SVG and JavaScriptサンプル";
var count = 0;
var scaleX =4;
var scaleY = 8;
var rot = 20;
window.addEventListener("load", function(){
setTimeout("anime()", 100);   
}, true);
function anime(){
var svgTextEle = document.getElementById("myText");   // SVGテキスト
svgTextEle.textContent = text.substr(0, Math.floor(count));
scaleX = scaleX - 0.05;
scaleY = scaleY - 0.1;
if (scaleX < 1) { scaleX = 1; }
if (scaleY < 1) { scaleY = 1; }
rot = rot - 0.25;
if (rot < 0) { rot = 0; }
count = count + 1;
svgTextEle.setAttribute("transform", "scale("+scaleX+", "+scaleY+") rotate("+rot+")");
if ((scaleX != 0) && (scaleY != 0)) {
setTimeout("anime()", 10);
}
}
</script>
</body>
</html>

 SVGは座標が変化するたびに描画する地点を再計算しなければならないので、タイマーの間隔を短くしても高速に動作しません。期待通りに動作させるには、将来的にSVGの描画速度が向上するか、より高速なCPUを搭載したマシンが登場するのを待たなければならないでしょう。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く