プログラミング：HTML5でアニメーション
非常勤講師：山本博志 講義補助資料
アニメーションは、最初は、分子を描いて、消して、動かして描くをループで繰り返せばいいと思っていたが、実際は結構大変だった。そして、動かし始めると止まらなくなった。また、アニメーションしている間にも、ドラッグ操作、分子の拡大、縮小、移動の操作は受け付けてくれないと困る。
最終的にはこんな形にしておくと、他の操作を受け入れながら、アニメーションもできるようだ。ポイントはsetInterval関数だ。ネットで調べてみて欲しい。
var timer1;
function MyVibstart(){
clearInterval(timer1);
ReDraw();// 分子の描画ルーチン
timer1 = setInterval("TimeSpend()", 25);
if(VivOn==0){return;}
}
function TimeSpend(){
if(VivOn==0){return;}
vib_animate();// 振動したあとの座標を得る。
ReDraw();// 分子の描画ルーチン
toDoSign();//振動方向の逆転
}
ストップボタンが押されたらVivOnに0をセットするとアニメーションは止まる。
次に、困ったのが、この遷移状態は20*20で400データ、構造と振動を合わせると800データある。これを全てプログラムの中に入れ込むのは意味が無いだろう。データだけで5Mを超える。これをJavaScriptでサーバーからとってこれるようにしたかった。データはテキストファイルなのだから、普通にブラウザーで表示することもできるのに、テキストデータをJavaScriptのプログラム上で利用出来るように読み込むやり方が分からなかった。いろいろネットで調べたところ、
loadTextFile(ファイルネーム);
function loadTextFile(fName){
httpObj = createXMLHttpRequest(displayData);
if (httpObj){
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData(){
var textAreaToChange = document.getElementById("textarea1");
if ((httpObj.readyState == 4) && (httpObj.status == 200)){
textAreaToChange.value = httpObj.responseText;
}else{
textAreaToChange.value = "Loading...";
}
}
function createXMLHttpRequest(cbFunc)
{
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}
とやれば、テキストはhttpObj.responseText;に入ってくるので、プログラム中で再利用可能になる。これを行に分割して、スペース区切りで分割して座標データと振動データにすれば良い。ところがiPadでは、ここのXMLhttpObjectのところでこけている。httpObj.readyState が4を返さないため延々とloading..が表示される。それについてはもう少し調べてみよう。
2011.6.20
原因が分かった。サーバーにあるテキスト・データは、同じサーバーにあるhtmlファイルから呼ばれたときにだけ読み込むことができる。自分は自分のサーバーを、"www.pirika.com"と呼んでいるのだが、ホームページ作成ソフトはリンクを勝手に"pirika.com"とwwwを外してしまう。そこで、異なるサーバー扱いになりエラーになっている。相対リンクではなく、絶対リンクにしたら解決した。もちろんiPadでもOKだ。
プログラミングのトップページへ
