アニメーション

一定時間で画像を交換

一定時間で画像を交換することにより、狭い場所にたくさんの情報をのせることができ、人目を引くこともできます。交換する画像をうまく作ればアニメーションにすることもできます。

ウェブページ上のアニメーションはいままでアニメーションgifが一般的でしたが、最近はflashが使われるようになってきています。広告を切り替えるような用途では、JavaScriptもよく使われます。

スクリプトの書き方

まず、例によって元の絵を body の中に img タグで貼り付けます。そこにはやはり、id="area1" と名前を付けます。この名前は任意ですがページ内で同じ名前があってはいけません。

<img src="images/img1.png" alt="" id="area1" />

この画像を次々に換えるために anime() という関数を script タグの中で次のように定義します。

<script type="text/javascript">
function anime(){
   if ( n==1 ) {
      document.getElementById("area1").src = "images/img2.png";
      n=2;
   }else if ( n==2 ) {
      document.getElementById("area1").src = "images/img3.png";
      n=3;
   }else if ( n==3 ) {
      document.getElementById("area1").src = "images/img1.png";
      n=1;
   }
   setTimeout("anime()",1000)
}

window.onload = function(){
   n = 3;
   anime();
}
</script>

まず考え方をおおざっぱにつかんでください。現在の画像が何番目になっているかを n に記憶させています。そして、n が1だったら2に換え、n が2だったら3に換え、n が3だったら1に換えるということを繰り返しているだけです。

この繰り返しをさせているのは、「自動的に移動」でもでてきた setTimeout() 関数です。ここでは1秒たったら anime() という関数を実行するという命令になっています。1000というのが1秒のことです。

anime() の中で anime() を呼び出すということで永遠に繰り返すことになっているわけです。

画像が大きいときは参考資料の「スムーズに動かす」に従って画像を前もって取り寄せ(プリロード)した方がスムーズにいきます。しかし、このままでも3つの画像が読み込まれるまでは乱れますが、その後は問題ありません。

スクリプトの開始

永遠に自己を呼び出し続ける anime() ですが、最初に一回呼び出さなければ始まりません。 それが最後の部分の window.onload = function でおこなわれます。 プログラムをページの読み込みと同時に自動で開始するのは「62.自動的に移動」でも使いましたが、 今回は、引数がいらないので()の中には何も書きません。

n は現在の画像が何番目になっているかを記憶していました。プログラムでこのようなものを、「変数」とよんでいます。 anime()の中で n の値を調べていますが、最初は n が決まっていませんから、 window.onload の中で n=3 などと初期値を入れておく必要があります。n=3 にしたのは 1 から始めたいからです。n=1 にすると1がほとんど目に止まらず、 2 から1秒ごとに変化していくことになってしまいます。

解説

if や else if は次の(   )内の条件によって次の{   }内の命令を実行するかしないかを決定するものです。

if ( a ){ A } else if ( b ){ B } else if ( c ){ C }

は、a という条件では A を実行し、b という条件では B を実行し、、c という条件では C を実行するということになります。

abcやABCの内容は長くなるので、条件と実行内容の対応がわかりやすいように、次のような配置で書く習慣になっています。

if ( aであるか ) {
   aが成立したときに実行する内容。
}else if ( bであるか ) {
   bが成立したときに実行する内容。
}else if ( cであるか ) {
   cが成立したときに実行する内容。
}

「{ 」や「 }」がとんでもないところにありますが、書き忘れないように。

さて、次は条件ですが、ここでは n が1であるか2であるか3であるかという3つの状態があり得ます。「nが1であるか」という条件は( n == 1 )と書きます。「=」を2つ書くのは代入と区別するためです。代入は 「=」 を1つにして、n=1 と書きます。代入とは n に 1 を覚えさせることです。条件の検査では n が 1 かどうか調べるだけで、1 を代入しないのだから、書き方も区別しようということでこのように決められています。

n==1 が成立すれば、次の2つの命令が実行されます。

document.getElementById("area1").src = "images/img2.png";
n=2;

画像の src を img2.png にして、nに2を代入します。今表示されている画像が2番目のものだと覚えておくわけです。nが2になりましたが、次の ( n == 2 )で実行される命令はやりません。次は一連の if ~ else if の次の setTimeout の命令に移ります。

この命令は「 anime() を 1000 ミリ秒(=1秒)待ってから実行せよ」という意味になります。

setTimeout("anime()",1000)

1000ミリ秒後にanime()が呼ばれたときは n の値は2なので、今度は2つめの部分が実行されます。

document.getElementById("area1").src = "images/img3.png";
n=3;

このようにして繰り返していくことになります。

課題 ファイル名 anime.html

一定時間で画像を交換するページをつくりなさい。とりあえずclick.htmlで使用した画像を使ってもよいが、うまくいったら、自分の画像と入れ替えること。画像の大きさは任意でよいが、同じ大きさのほうがよい。

最終的には必ず自作の画像にすること。

index.htmlからは「アニメ」という名前のリンクから行けるようにすること。

一般的なDOMを使って

htmlだけでなく上位のxmlに使えるやり方があります。一般のjavascriptよりもブラウザによる差が少ない方法です。しかし、一部IEでは使えない場合もあります。検証が十分でないので、参考までに掲載します。

bodyの中に書く部分は上記と同じです。

<img src="images/img1.png" alt="" id="area1" />

javascript部分は、クリックで切替で説明したものと同じです。タグの中の A=B という部分をアトリビュート(Attribute)といいます。imgタグの src="images/img1.png" もアトリビュートです。

Aの値をBにするためには、setAttribute("A","B") とします。

function anime(){
   if ( n==1 ) {
      document.getElementById("area1").setAttribute("src","images/img2.png");
      n=2;
   }else if ( n==2 ) {
      document.getElementById("area1").setAttribute("src","images/img3.png");
      n=3;
   }else if ( n==3 ) {
      document.getElementById("area1").setAttribute("src","images/img1.png");
      n=1;
   }
   setTimeout("anime()",2000)
}

window.onload = function(){
   n = 3;
   anime();
}

こちらでは2000にしたので、2秒で画像が替わります。


ウェブページ(Nov.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Oct.2008 改訂