PNGアニメ その2

画像ファイルPNGで、アニメーションします。もちろん、jpgでもいいです。今度は、3枚の絵を順番に入れ替えてます。また、ボタンで、動かしたり止めたりしてます。

こちらが、サンプルです。

ソース表示すると、こうでます。(これ以外は、広告用なので、無視してください)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Script-Type" content="javascript">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>JavaScriptの実験・サンプル・解説・PNGアニメその2</title>
<script type="text/javascript">
<!--
flag=0;
sw=false;
box=new Array
box[0]=new Image;
box[0].src="anime/box_1.png";
box[1]=new Image;
box[1].src="anime/box_2.png";
box[2]=new Image;
box[2].src="anime/box_3.png";

function anime(){
document.sikaku.src=box[flag].src;
flag++;
if (flag==3) flag=0; 
key=setTimeout("anime()",500);
}

function change(){
if (sw) {clearTimeout(key);}
else {anime();}
sw=!sw;
}
//-->
</script>
</head>
<body>
<p>
<img src="anime/box_3.png" alt="square" width="32" height="32" name="sikaku">

<button onClick="change()">push</button>

</p>
</body>
</html>

いちおう、全部解説します。前回と同じとこは、コピーしてるだけなので、見た人は飛ばしていいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTML4.01 Strictという文書タイプを使います、と宣言してます。普通はこれを使いましょう。

<html lang="ja">
html内に、HTMLを書くようにします。lang="ja"は、日本語を使いますっていうことです。

<head>〜</head>
この中に、情報、定義しておくものなどを書きます。

<META http-equiv="Content-Script-Type" content="javascript">
JavaScriptを使いますってことを言っておきます。

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
標準的なシフトJISで書きますってことです。この宣言の前には日本語(漢字)は使わないようにしましょう。

<title>anime_1</title>
<title>〜</title>の中にタイトルを入れます。タイトルは必ず入れるようにしましょう。「JavaScriptの実験・サンプル・解説・PNGアニメその2」となってます。もっと分かりやすくてもいいですね。

<script type="text/javascript">
<!--
この中にJavaScriptを書きます。
//-->
</script>
将来、language="javascript"でなくtype="text/javascript"になるかもしれませんので、こう書いておきます。

flag=0;
変数flagを0にしておきます。これを、0〜2にして、配列変数[ ]に入れて楽します。

sw=false;
変数swをfalseにしておきます。これは、animeが動いてるか、動いてないかのチェックに使います。

box=new Array
配列変数boxを作ります。

box[0]=new Image;
box[0].src="anime/box_1.png";
box[1]=new Image;
box[1].src="anime/box_2.png";
box[2]=new Image;
box[2].src="anime/box_3.png";

画像を、new Imageであらかじめ読みこんでおいて、srcで、ファイル名を指定します。配列変数box[0〜2]の中に入れてます。アニメの数を増やしたいときは、3〜の数字を使って入れます。

function anime(){
}

anime()という関数を作ります。この中{ }に関数の中身を書きます。

document.sikaku.src=box[flag].src;
imgの名前(name)、sikakuのを、box[0〜2]のに替えてます。サンプルでは、1つしか画像は使われてないので、sikakuの代りにimages[0]でいいと思いますが、広告が入るときは、そっちに0が割り振られるかも知れないので、nameかidで指定した方がいいでしょう。

flag++;
flagに+1してます。flag=flag+1;です。

if (flag==3) flag=0;
flagが3になったら、0にします。アニメの数を変えたい時は、ここも変えます。
いちいち変えるのが面倒なら、lengthを使って、(flag==box.length)でもいいです。配列変数.lengthで、配列がいくつ入ってるか分かります。0〜2までの3つ入ってるから、3になります。

上の2行の flag++; if (flag==3) flag=0; を計算式のみで書くと、
flag=(flag+1)%3;となります。flagに1足して、%3で、3で割った余りをflagに入れてます。3で割ると、答えは、0〜2になります。

key=setTimeout("anime()",500);
setTimeoutで、anime()を呼び出します。これが、普通の、一定時間ごとに繰り返す処理の仕方です。ミリ秒単位で指定しますので、500は、0.5秒です。
setTimeoutに変数key(タイマーID)を設定してますので、clearTimeoutで、止めることができます。

function change(){
}

関数changeを作ります。ボタンを押したとき、animeの実行、停止を司ります。

if (sw) {clearTimeout(key);}
else {anime();}

{ }の中は、一つだけなので、{ }がなくても動きます。
始めは、swはfalseです。swが、trueなら、animeが動いてるということなので、clearTimeout(key);で、animeを止めます。
elseで、swがfalseなら(始めの設定)、anime()で、実行させます。

sw=!sw;
!で、反転させることができます。trueをfalseに、falseをtrueにします。
始めは、falseで、ボタンを押してここに来たとき、anime()を動かし、!swで反転し、trueになります。trueだと、animeが動いてるということです。

JavaScriptは終り、これからは、HTMLです。

<body>
<body>〜</body>内に、メインの文を書きます。

<p>〜</p>
imgとbuttonは、インライン要素で、bodyに直接書いてはいけないので、pで囲ってます。pの代りにdivでもいいです。

<img src="anime/box_3.png" alt="square" width="32" height="32" name="sikaku">
imgで、画像を表示します。
src="anime/box_3.png"で、ファイル名を指定します。必要です。
alt="square"で、画像が表示されない時に表示される言葉を指定します。IEだと、カーソル(マウス)を合わせると、吹き出しが出ます。必要ですので、入れるようにしましょう。表示したくないときは、alt=""としましょう。
width="32" height="32" で、横、縦のサイズを指定します。指定すると、読み込み中にレイアウトが崩れることがないので、入れたほうがいいでしょう。
name="sikaku"で、名前をつけます。document.sikaku.src=というふうに、JavaScriptでコントロールする時に使います。

<button onClick="change()">push</button>
<button>〜</button>で、ボタンを作ります。この中のものがボタンになります。ここでは、pushという文字が入ってます。
onClickで、マウスをクリックしたときに、change()が実行されます。


本当は、もっとMETAとか、ADDRESSとかCSSがほしいです。このサンプルは、IE5.5とNetscape6で動きました。//でコメントを付けておくと分かりやすいかも。


Next : 次のサンプルへ
Rev  : 前のサンプルへ
 Up  : JavaScript-Sampleに戻る
Home : ホームに戻る

Presented by Rei

楽天モバイル[UNLIMITが今なら1円] ECナビでポインと Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜!


無料ホームページ 無料のクレジットカード 海外格安航空券 解約手数料0円【あしたでんき】 海外旅行保険が無料! 海外ホテル