PNGアニメ

画像ファイルPNGで、アニメーションします。もちろん、jpgでもいいです。2枚の絵を交互に入れ替えてます。

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

ソース表示してみてください。こんなのが、でます。

<!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>anime_1</title>
<script type="text/javascript">
<!--
flag=true;
cat1=new Image;
cat1.src="anime/cat_1.png";
cat2=new Image;
cat2.src="anime/cat_2.png";

function anime(){
if (flag) {_cat=cat1;} else {_cat=cat2;}
document.neko.src=_cat.src;
flag=!flag;
setTimeout("anime()",500)
}
//-->
</script>
</head>
<body onLoad="anime()">
<p>
<img src="anime/cat_1.png" alt="cat" width="32" height="32" name="neko">
</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アニメその1」とか。

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

flag=true;
flagという変数を、trueにします。

cat1=new Image;
cat1.src="anime/cat_1.png";
cat2=new Image;
cat2.src="anime/cat_2.png";

画像を、new Imageであらかじめ読みこんでおきます。アニメ処理をするたびに読みこむのもなんですから。

function anime(){
}

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

if (flag) {_cat=cat1;} else {_cat=cat2;}
もしも(if)、flagがtrueなら、変数_catに、上で作っておいたcat1を入れます。trueでない(false)場合、else以降の文が実行されますので、_catにcat2が入ります。
ifの代りに?を使ってもいいです。その場合、こんな感じです。
_cat=(flag) ? cat1 : cat2;

document.neko.src=_cat.src;
画像のnameは、nekoです。document.neko.src=で、画像を変えることができます。nameをつけてない場合は、nekoの代りに、images[0]でもいいです。この場合は。if文で、選んでおいた_catに、.srcをつけて、代入します。

flag=!flag;
!で、反転させることができます。trueをfalseに、falseをtrueにします。

setTimeout("anime()",500)
setTimeoutで、anime()を呼び出します。これが、普通の、一定時間ごとに繰り返す処理の仕方です。ミリ秒単位で指定しますので、500は、0.5秒です。

JavaScriptは終り、これからは、HTMLです。
<body onLoad="anime()">
<body>〜</body>内に、メインの文を書きます。
onLoadは、HTMLを読みこんだら、実行するってことです。読みこんだらすぐに実行してほしいので、bodyに入れておきます。onLoad="anime()"で、anime()関数を呼び出します。

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

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


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


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

Presented by Rei

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜!
無料ホームページ 無料のクレジットカード 海外格安航空券 海外旅行保険が無料! 海外ホテル