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です。
ボタンをクリックすると図形が回転しはじめる
■サンプル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を搭載したマシンが登場するのを待たなければならないでしょう。
