JavaScriptでやってみること（その１）基本的なアニメーション

JavaScript

自分で作りたいものができたので、どの言語で実装するかをいろいろと検討したが、JavaScriptが一番いい（安上がりな）のではというとりあえずの結論に達した。
そこで少しずつ、自分がやりたいことを実現するには、どうすればいいのか考えていく。いきなり、複雑な処理を実現するのは無理なので、要素に分解して勉強していく。

  • やってみること（その１）
    • 複数の画像を連続描画してアニメーションを実行
    • アニメーションを途中で止めて、キー入力を待つ
    • キーが入力されると、別のアニメーションを再生開始

その１としては、こんな処理をやってみたく、ひっぱり出してきた参考書
にのっているソースを変えて実現。その１、できた。setTimeoutメソッドで自分自身の関数を呼び出すと、一定期間同じ処理を繰り返す、という常識。
以下、ソース。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>animation</title>
<script language="JavaScript" type="text/javascript">
var MAXIMG = 8;
var NUMIMG = 4;
var INTERVAL = 2000;
var counter = 0;
var timer;

var imgs = new Array(MAXIMG);
for (var i = 0; i < MAXIMG; i++) {
    imgs[i] = new Image(2272,1704);
    imgs[i].src = "images/img" + i + ".jpg";
}

function animate1(){
    document.myImg.src = imgs[counter++].src;
    timer = setTimeout('animate1()', INTERVAL);
    if (counter == NUMIMG) {
        clearTimeout(timer)
    }
}

function animate2(){
    document.myImg.src = imgs[counter++].src;
    timer = setTimeout('animate2()', INTERVAL);
    if (counter == MAXIMG) {
        clearTimeout(timer)
    }
}

</script>
</head>
<body bgcolor="#ffffff" onload='animate1()'>
<p>  <img src="images/img0.jpg" name="myImg"
     alt="anime" width="568" height="426" onclick="animate2()">
</p>
</body>
</html>

JavaScriptプログラミング入門 第2版
JavaScriptプログラミング入門 第2版大津 真

オーム社 2006-09-23
売り上げランキング : 180643

おすすめ平均 star
star入門書として内容はいいと思います。
star初級者向け。
star基礎からしっかり。ずっと使える。

Amazonで詳しく見る by G-Tools