ベティーさんが走って行く。 Betty is running. --　Beaverland Net Art -- For Internet Artists

ベティーさんが走って行く。
ジャバスクリプト
アニメーション

by Akira Kato

October 20, 2003

Betty is smiling (run01.gif--210x199)

うまく走らない場合は、
下のGIFアニメーションを見てください。

Betty is smiling (run01.gif--210x199)

これはGIFアニメーションです。
コネクション・スピードが遅いと
ジャバスクリプト・アニメーションは
うまく走りません。

ジャバスクリプト・コードは次のようになります。

var myTimerID=null
var running=false
var myCount=0
var delayTime=300
var myPics=new Array("images/run01.gif",
"images/run02.gif",
"images/run03.gif",
"images/run04.gif",
"images/run05.gif",
"images/run06.gif",
"images/run07.gif",
"images/run08.gif")

function stopBetty() {
clearTimeout(myTimerID)
document.myGal.src="images/june92c.gif"
}

function startBetty() {
myCount++
if (myCount==8) myCount=0
document.myGal.src=myPics[myCount]
myTimerID=setTimeout("startBetty()",delayTime)
}

function dearBetty() {
if (running) {running=false
stopBetty()}
else {running=true
startBetty()}
}

//----->
</script>

<input type=button value="Faster "
onClick="if (delayTime > 10) {delayTime -= 10;
document.thisForm.delayNumber.value = delayTime}"
onDblClick="if (delayTime > 100) {delayTime -= 100;
document.thisForm.delayNumber.value = delayTime}">

このページは次に示すページの続きです。もし直接、このページへジャンプした場合には、次のリンクをクリックして読んでください。このページで目新しいのは、上のコーディング・シートの白地の部分だけです。

ここでは、その部分について説明します。それ以外については、下のリンクをクリックすれば、詳しいことが分かります。（新しいウィンドーが開きます。このページへ戻るには、そのウィンドーを閉じてください。）

『JavaScriptでウィンクを！』
このページでは次のことが分かります。　
　

onClick のようなイベント・ハンドラーについて　

どのようにしたら「紙芝居」あるいは「スライド」のように絵を変えることができるか　

どのようにしたら、時間をずらせて、画面に絵を表示できるか　
　
透過色のあるGIFイメージについて　

『スタート・ストップ　メカニズム』

『どのようにしたら、ウェブページ閲覧者がスピードを設定できるか？』
このページでは次のことが分かります。　
　

スピードの設定について　

スピードの表示の仕方について　

FORMタグについて　

このアニメーションは８枚のフレームから出来ています。

この８枚のフレーム（絵）をmyPicsという配列変数 (array variable) の中にしまって置きます。そのやり方は、上のコーディング・シートで見るとおりです。配列に入った一つ一つのフレームは「エレメント（element）」と呼ばれます。

分かりやすいように一行に一つづつ書きましたが、つなげて書いてもかまいません。ただし、カンマで区切ることを忘れないように。

一つだけ忘れてならないことは、このエレメントを指定して表示する時、最初のエレメントは０（ゼロ）から始まります。１ではありません。

例えば最初の絵を取り出して表示する時には次のように書きます。

Betty is smiling (run01.gif--210x199)

コマを一つづつ進めるには次のようにします。

Betty is smiling (run01.gif--210x199)

コードは次のようになります。

var myCounter=0

function slideBetty() {
myCounter++
if (myCounter==8) myCounter=0
document.myBetty.src=myPics[myCounter]
document.myForm.frameNumber.value=String(myCounter)
}

//----->
</script>

　ボタンをクリックすると、イベント・ハンドラーの onClick が、上のコードの中に書いてあるジャバスクリプト・ファンクションのslideBetty()を起動します。

このファンクションの中で、ひとコマ進める処理を行っています。先ず、このファンクションの最初のステートメントは、カウンターの数字を一つ進めます。

コードの中で使われているカウンター (myCounter) がコマ、つまり、フレーム番号と対応しています。８つのコマは、０から７まで番号が振ってあります。それで、もし、カウンターが８に等しい場合には、０に戻しているわけです。これが、このファンクションの２番目のステートメントです。

３番目のステートメントは配列の中に保存されているコマの中から、フレーム番号に対応しているものを引き出して表示します。

最後のステートメントは、フレーム番号をテキストとして表示するために、ストリング・ヴァリューに変換して、それを「テキスト窓」に表示します。計算に使った数字のままでは表示できないためです。残念ながら、ジャバスクリプトでは、これを自動的にやってくれません。

以上が、このファンクションの実行していることです。

マニュアルから自動に変えるにはどうすればいいの？

function startBetty() {
myCount++
if (myCount==8) myCount=0
document.myGal.src=myPics[myCount]
myTimerID=setTimeout("startBetty()",delayTime)
}

最後のステートメントを加えることにより、ジャバスクリプトが自動的にコマを進めてくれます。この　setTimeout()というファンクションは、ジャバスクリプトの中にすでに組み込まれている基本ファンクションです。

delayTimeという変数の初期値は３００に設定されているので、３００ミリセカンド　（０．３秒）後に startBetty() というファンクションを実行します。つまり、自分で自分を呼び出して実行するわけです。要するに、永久に同じファンクションが繰り返し実行されるわけです。

この永久ループを止めるために、myTimerID という変数を上の様に頭のところに付けて、これによって止めるように仕組まれています。詳しいことは、このページ　(スタート・ストップ　メカニズム) を読んでください。

配列(array)を使わずに、
ベティーさんを走らせるには
どうすればよいのか？

関連リンク