アニメーション・動画 / JavaScript

アニメーションを作りたい！『JavaScript』

JavaScriptでアニメーション

JavaScriptでアニメを作るには

　JavaScriptを使用すると簡単なアニメーションを作ることができます。(その他のアニメ・動画の作り方)

　ここで作るアニメーションの原理はパラパラマンガと同様、微妙に異なる絵を順次差し替えるものです。

◆サンプル

　この簡易アニメーションは、下記のgif画像を順番に表示しています。

　ここでもまさにその手法を使いますので数枚画像(画像保存形式)を準備してはじめましょう。

◆全体の手順

  A）JavaScriptの外部ファイル作成
  B）<body onLoad="">を使用して関数を呼ぶ
    例)<body onload="bodytimerID=setTimeout('change()',2000)">
  C）htmlファイルで外部ファイルを設定
  htmlファイル内のアニメーションを表示したい場所に
    <script src="" type="text/javascript"></script>
  と
    <img src="" name="" alt="">を記述する。

　ここまでご覧頂いた方はB）～ C）は問題ないでしょう。

　それではA）のJavaScriptファイルを早速見てみましょう。

◆『あなたのお好きな名前.js』

    imageA = new Image();imageA.src="お好きな画像1.jpg";
    imageB = new Image();imageB.src="お好きな画像2.jpg";
    imageC = new Image();imageC.src="お好きな画像3.jpg";

    if (document.layers) { window.onResize = reloadNow; }
    function reloadNow() {
        document.location = window.location.pathname;
    }

    function change(){
        clearTimeout(bodytimerID);
        if(document.anime.src==imageA.src)
        document.anime.src=imageB.src;
        else if(document.anime.src==imageB.src)
        document.anime.src=imageC.src;
        else
        document.anime.src=imageA.src;
        bodytimerID = setTimeout("change()",1500);
    }

　行を追って順にご説明しますと

    imageA = new Image();imageA.src="お好きな画像1.jpg";
    imageB = new Image();imageB.src="お好きな画像2.jpg";
    imageC = new Image();imageC.src="お好きな画像3.jpg";

『imageA～imageC』は変数

『new』はJavaScriptやその他の一部の言語で使用される次にくる関数のいわゆるコピーをつくる為の定型句

　ここでは『imageA～imageC』それぞれの行が1行で記述されていますが『；』の直後で改行する事も可能です。

　つまり、1行に2行分表示されています。

『imageA.src』はnewで作成したImage()というJavaScript固有の関数に画像ファイルを代入しています。

  →『imageA.src』は以後右辺で指定した画像ファイル名と同じものになります。
以降imageB～imageCも同様です。

    if (document.layers) { window.onResize = reloadNow; }

『if(){ }』は「もし()内の条件が一致した場合{ }を実行するもの
  →『document.layers』はhtmlファイルの状態を表す定型句
  →『window.onResize』はウィンドウのサイズが変更された場合を表す定型句
  →『reloadNow』はこの後作成する関数名
  →『;』は行の最後を意味する(関数名や”{”と”}”の後には不要)

  実はこの行は1行で記述していますが、以下の記述でも可
  if (document.layers) {
    window.onResize = reloadNow;
  }

　この後者の記述の方が行の最後のイメージがつかみやすいかもしれませんね。

　つまり、この部分は「現在のウィンドウサイズが変更された場合reloadNow関数を呼ぶ」という事です。

　そのreloadNow関数は

    function reloadNow() {
        document.location = window.location.pathname;
    }

『function』は値を返す事ができる関数に付加する定型句
『reloadNow() { }』は関数記述の定型でreloadNow関数である事を意味する
『document.location』はhtmlファイルのアドレスが格納されているもので参照と設定が可
『window.location.pathname』は現在のウィンドウのアドレスのパス

つまり、reloadNow関数は、「現在表示されているhtmlファイルのパスを改めて現在のウィンドウに設定する」という意味です。

　この関数だけでは実行しても意味をなさないのですが、この関数は前述の「ウィンドウがサイズ変更された場合」に呼ばれる為、「サイズが変更されても同じ内容を記述してね」という意味になります。

　ここまでは準備です。

　比較的古いブラウザは上記を記述しないとブラウザのサイズが変わった時にうまく動作しない事があります。

　最近のブラウザは対応してくれるので上記を記述しなくても以下の部分だけでもアニメーションはできます。

　実際にアニメーションをつくる関数は次の『change()関数』です。

function change(){ }

『function』は値を返す事ができる関数に付加する定型句
『change() { }』は関数記述の定型でchange()関数である事を意味する

clearTimeout(bodytimerID);

『clearTimeout()』はJavaScript固有のタイマー解除関数
『bodytimerID』は変数

        if(document.anime.src==imageA.src)
        document.anime.src=imageB.src;
        else if(document.anime.src==imageB.src)
        document.anime.src=imageC.src;
        else
        document.anime.src=imageA.src;

『if( A )～ else ～』は「もし条件がAなら～、それ以外なら～」を
表す様々なプログラム言語で使用される定型句(制御構文)

『document.anime.src』はドキュメント内の「name="anime"」という名前のIMGのソースという意味。
htmlファイルでは<img src="" name="anime" alt="">という名前が付いているという前提です。
「name="anime"」の[anime]部分は、お好きな名前で結構ですが、htmlとjavascriptで
一致させておかないといくらやっても動作しません。

    if(『document.anime.src』が『imageA.src』の場合)
    『document.anime.src』に『imageB.src』を代入する
となります。

同じように
    『imageB.src』の場合『imageC.src』を代入する
それ以外(『imageC.src』)の場合
    『imageA.src』を代入する

となり、最初に設定した３つの画像ファイルを現在表示されているファイルがどれであるかを特定し、それぞれの場合に『次に来るべき画像ファイル』を設定する事によって画像を順次入れ替えることができるようになるというわけです。

bodytimerID = setTimeout("change()",1500);

[bodytimerID]というjavascript内で任意に名付けた変数に
setTimeout("change()",1500)でタイマーをセットして代入

[setTimeout()]は、javascript固有のタイマーセット関数
[change()]は、javascriptで付けた任意の関数名
ここでは[1500]としていますが、動作に合わせてタイマーを「ミリ秒」(1/1000秒)単位でセット

このように最後にJavaScript固有のタイマー関数を使用して自分自身を呼ぶ

ことにより、この関数内の処理を繰り返します。

　いかがでしたでしょうか？

　「意味はわかるけど、記述がわかりにくい！」という声が聞こえてきそうですね。

　これはこういうものなんだとなんとなく理解できるまでは覚えにくいかもしれませんが、そこまでいけばスラスラ記述できるようになりますよ。

　上記の例をコピーしてなんとなくイメージでいろいろと画像を増やしたりしてやってみるのもいいでしょう。

現在の時間を表示させたい！