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データあります。

これを全てプログラムの中に入れ込むのは意味が無いでしょう。
(2020:JSONで1行にまとめ、整理してみたら2.8MByteだったのでプログラムに組み込みました。)

これを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..が表示されます。

原因が分かりました。サーバーにあるテキスト・データは、同じサーバーにあるhtmlファイルから呼ばれたときにだけ読み込むことができます。

自分は自分のサーバーを、"www.pirika.com"と呼んでいるのですが、ホームページ作成ソフトはリンクを勝手に"pirika.com"とwwwを外してしまいます。

そこで、異なるサーバー扱いになりエラーになっていました。

相対リンクではなく、絶対リンクにしたら解決しました。
もちろんiPadでもOKです。

化学系プログラミング > 比較的新しい化学系プログラミング > HTML5手習 > HTML5でアニメーション