ここでは、使用例をまとめています。ご参考になれば幸いです。
画像を一定間隔で置き換えてアニメーション効果を出します。GIFアニメーションは簡単に出来ますが、JPEGアニメとかPNGアニメは存在しない(MNGはありますが・・・)のでJavaScriptで作成することになります。そこでアニメーションさせる画像の枚数は、何枚にすればプログラム作成時に便利で素早い動作が出来るのでしょうか?
正解は2のn乗枚です。2, 4, 8, 16, 32, 64, 128...枚となります。とりあえず16枚のGIF(って意味ないじゃん ^^;;;)画像でのアニメーションを考えてみましょう。(手持ちのJPEGとかPNGの良い画像が無かったのですみません。・・・ブラウザの対応している画像形式なら何でもOKです。)
<head>
<script language="JavaScript1.1">
<!--
/*icon[0]〜icon[15]の配列要素を作成し、各々の要素
に対して「0.gif」〜「15.gif」の画像を設定*/
icon = new Array(16);
icon[0] = new Image(); icon[0].src = "0.gif";
icon[1] = new Image(); icon[1].src = "1.gif";
icon[2] = new Image(); icon[2].src = "2.gif";
icon[3] = new Image(); icon[3].src = "3.gif";
icon[4] = new Image(); icon[4].src = "4.gif";
icon[5] = new Image(); icon[5].src = "5.gif";
icon[6] = new Image(); icon[6].src = "6.gif";
icon[7] = new Image(); icon[7].src = "7.gif";
icon[8] = new Image(); icon[8].src = "8.gif";
icon[9] = new Image(); icon[9].src = "9.gif";
icon[10] = new Image(); icon[10].src = "10.gif";
icon[11] = new Image(); icon[11].src = "11.gif";
icon[12] = new Image(); icon[12].src = "12.gif";
icon[13] = new Image(); icon[13].src = "13.gif";
icon[14] = new Image(); icon[14].src = "14.gif";
icon[15] = new Image(); icon[15].src = "15.gif";
var ImageNum0 = 0; //「0」を設定。
function ANIM0(){
document.myANIM0.src = icon[ImageNum0].src;
ImageNum0 = ImageNum0 + 1; //ImageNum0に「1」を加える。
if (ImageNum0 > 15) {ImageNum0 = 0}//ImageNum0が「16」ならImageNum0>15がtrueとなり「0」に戻る
setTimeout("ANIM0()",200); //アニメーションスピードは200で変更。
}
//-->
</script>
</head>
以上をhead部に記述します。
<body onLoad="ANIM0()">
<img src="0.gif" name="myANIM0" alt="animation0" width="32" height="32">
</body>
以上をbody部に記述します。
new演算子とArrayオブジェクトを使って配列を作ります。イメージオブジェクトもnew演算子を使って作成します。この配列についてはどの方法も必要ですので記述してください。
普通の方法の解説です。アニメーション処理は、変数ImageNum0
の値を変化させることによって行います。まずページが読み込まれた時、onLoadによって関数ANIM0を呼び出します。最初ImageNum0
は「0」を設定しているので、document.myANIM0.src
= icon[ImageNum0].src
はdocument.myANIM0.src = icon[0].src
となり「0.gif」が表示されます。次にImageNum0
= ImageNum0 + 1
で「1」を加え、setTimeout("ANIM0()",200)
で再度関数ANIM0を呼び出します。呼び出された関数ANIM0のImageNum0
の値は「1」になっているので、document.myANIM0.src
=icon[ImageNum0].src
はdocument.myANIM0.src = icon[1].src
となり「1.gif」が表示されます。これを0.2秒毎に繰り返し、if文によってImageNum0
が「16」になった時、ImageNum0
> 15
がtrueとなりImageNum0
の値は「0」に戻り、アニメーション処理がループします。このように普通の方法では15より大きくなったかどうかを判定するためにif文が必要です。
<script language="JavaScript1.1">
<!--
var ImageNum0 = 0; //「0」を設定。
function ANIM0(){
document.myANIM0.src = icon[ImageNum0].src;
ImageNum0++; //ImageNum0に「1」を加える。
if (ImageNum0 > 15) {ImageNum0 = 0} //ImageNum0が「16」ならImageNum0 > 15がtrueとなり「0」に戻る
setTimeout("ANIM0()",200); //アニメーションスピードは200で変更。
}
//-->
</script>
インクリメント(++)を使うとImageNum0
= ImageNum0 + 1
はImageNum0++
で表すことが出来ます。
<script language="JavaScript1.1">
<!--
var ImageNum0 = 0; //「0」を設定。
function ANIM0(){
document.myANIM0.src = icon[(ImageNum0++)&15].src;//論理積でImageNum0を制御。
setTimeout("ANIM0()",200); //アニメーションスピードは200を変更。
}
//-->
</script>
論理積(&)を使うとif文は(ImageNum0++)&15
で表すことが出来ます。これは、画像の16枚目の値15をビットで表すと1111になり、論理積の演算を行うと結果が1111よりも大きくならない(すなわち15以下になる)ことを利用したものです。ここで2のn乗の値をビットで表すとビット列はすべて1になります。このようにビット単位で処理をすると素早くプログラムを実行出来ます。(コンピュータ内部では、文字も数値も「0」と「1」のビット単位で処理されているからです。)これがアニメーションさせる画像の枚数は2のn乗である所以です。
<script language="JavaScript1.1">
<!--
var ImageNum0 = 0; //「0」を設定。
function ANIM0(){
document.myANIM0.src = icon[(ImageNum0++)%16].src; //ImageNum0と16の余剰で制御。
setTimeout("ANIM0()",200); //アニメーションスピードは200を変更。
}
//-->
</script>
前段で画像のアニメーションを行うには2のn乗の枚数にしておけば良いと書きました。が実際には、そうそううまくいくものではありません。画像の枚数が10枚とか20枚などの場合はif文を使わなければいけないのか?いやそんな事はありません。このような不特定枚数の場合は余剰(%)を使います。例の16枚のアニメーションの場合は上記ソースのようになります。10枚ならば16の部分を10、20枚ならば16の部分を20にすればよいのです。
余剰(%)を使うとif文は(ImageNum0++)%16
で表すことが出来ます。これは、除算の余り(割り切れずに残った部分)が分母(16)よりも大きくならない(すなわち15以下になる)ことを利用したものです。