堀北真希うさぎ
主な作品
堀北真希ちゃんがボシュロム社コンタクト洗浄液CMに出演した事にちなんだ、レンズを着けている堀北真希うさぎのイラストと仮想CM動画

ページ案内▼

JAVAスクリプトに依るアニメーション。

JAVAスクリプトに依るアニメーション・目次。

JAVAスクリプトに依るアニメーションについて。

JAVAスクリプトでは、一度表示させた画像を後から差し替える事で、アニメーションを実現出来ます。GIF画像には元からアニメーションの機能がありますが、JPEG画像などのアニメーション機能の無い画像形式をアニメーションしたい場合にはこの方法が使えるでしょう。

JAVAスクリプトに依るアニメーションのサンプル。

ネットスケープ 2.x以外のスクリプトを実行出来、画像を表示出来る環境なら、堀北真希うさぎがまばたきをしているのが分かるでしょう。

その他の画像を表示出来る環境では、静止画状態となります。

「JAVAスクリプトに依るアニメーション」スクリプトのソース。

JAVAスクリプトに依るアニメーションを実現するスクリプト「Animation.js」は以下の通りです。

詳しくは、以下の「JAVAスクリプトに依るアニメーション」スクリプトの流れをご覧下さい。

anime_dir="";
anime_name="HorikitaUsagi";
anime_ext=".GIF";
animeC=new Array();
animeT=new Array();
animeT[0]=3000;
anime=0;
if (document.images) {
    cell1=new Image();
    cell2=new Image();
    cell3=new Image();
    cell1.src=anime_dir+anime_name+anime_ext;
    cell2.src=anime_dir+anime_name+'1'+anime_ext;
    cell3.src=anime_dir+anime_name+'2'+anime_ext;
    animeC[0]=new Image();
    animeC[0].src=cell2.src;
    animeT[0]=100;
    animeC[1]=new Image();
    animeC[1].src=cell3.src;
    animeT[1]=100;
    animeC[2]=new Image();
    animeC[2].src=cell2.src;
    animeT[2]=100;
    animeC[3]=new Image();
    animeC[3].src=cell1.src;
    animeT[3]=500;
    animeT[4]=-1;
    }
tm=setTimeout("animep()",animeT[0]);

function animep() {
    clearTimeout(tm);
    var t=3000;
    if (document.images) {
        i=document.images.length;
        while (--i>=0) {
            if (document.images[i].src.indexOf(anime_name)>=0) {
                document.images[i].src=animeC[anime].src;
                t=animeT[anime];
                anime++; if (animeT[anime]<0) { anime=0; }
                break;
                }
            }
        }
    tm=setTimeout("animep()",t);
    }

「JAVAスクリプトに依るアニメーション」スクリプトの流れ。

このスクリプトの流れは、以下のようになります。

  1. アニメーションする画像を読込む
  2. アニメーションのパターンを作る
  3. アニメ函数を起動する
  4. アニメ函数本体

アニメーションする画像を読込む。

anime_dir="";
anime_name="HorikitaUsagi";
anime_ext=".GIF";
animeC=new Array();
animeT=new Array();
animeT[0]=3000;
anime=0;
if (document.images) {
    cell1=new Image();
    cell2=new Image();
    cell3=new Image();
    cell1.src=anime_dir+anime_name+anime_ext;
    cell2.src=anime_dir+anime_name+'1'+anime_ext;
    cell3.src=anime_dir+anime_name+'2'+anime_ext;
	    …
    }

アニメーションする画像を読込む処理の説明。

まず、

それぞれ指定しておきます。

その後、anime_ext=".画像拡張子"; で取扱う画像の拡張子を指定します。

続いて、

はそれぞれ

で、配列変数として宣言します。

後者にはアニメーションが取扱えないブラウザの為に予め初期値を与えておきます。

anime=0; はこれらの配列変数のうち、現在参照しているものを指す変数です。

if (document.images) {

で画像を取り扱える事を確認した上で、三枚のセル画像のURLを登録します(この時に登録した画像は自動的に読込まれます)。

まず、 new Image でImageオブジェクト型変数とし、そのsrcにURLをセットします。

アニメーションのパターンを作る。

    animeC[0]=new Image();
    animeC[0].src=cell2.src;
    animeT[0]=100;
    animeC[1]=new Image();
    animeC[1].src=cell3.src;
    animeT[1]=100;
    animeC[2]=new Image();
    animeC[2].src=cell2.src;
    animeT[2]=100;
    animeC[3]=new Image();
    animeC[3].src=cell1.src;
    animeT[3]=500;
    animeT[4]=-1;
    }

アニメーションのパターンを作る処理の説明。

各パターンの表示画像と表示時間(千分の一秒単位)を指定しています。

具体的にはanimeC変数の各要素を new Image() でImageオブジェクト型にし、そのsrcプロパティにセル画像のsrcプロパティの値を入れ、animeT変数には所要時間を指定します。

またアニメーションのパターンの終わりは所要時間を -1 とする事で目印となるようにします。

アニメ函数を起動する。

tm=setTimeout("animep()",animeT[0])

アニメ函数を起動する処理の説明。

setTimeout函数でアニメ函数を起動します。

アニメ函数。

function animep() {
    clearTimeout(tm);
    var t=3000;
    if (document.images) {
        i=document.images.length;
        while (--i>=0) {
            if (document.images[i].src.indexOf(anime_name)>=0) {
                document.images[i].src=animeC[anime].src;
                t=animeT[anime];
                anime++; if (animeT[anime]<0) { anime=0; }
                break;
                }
            }
        }
    tm=setTimeout("animep()",t);
    }

アニメ函数の説明。

まず、旧いブラウザではクラッシュの原因となる為、clearTimeout(tm)でsetTimeoutを解除します。

続いて

if (document.images) {

で画像が取扱える事を確認した上で、以下の操作を行います。

  1. i=document.images.length;

    でHTML文書中の画像の個数を得て、その中から anime_name で指定した名前を含むURLを持つ画像を調べます。

    具体的には

    document.images[i].src.indexOf(anime_name)

    が 0以上の値になっているかどうかで画像のURL中に指定した文字列が含まれているかを判定します。

  2. 該当する文字列が含まれているなら、それを操作します。実際には画像のアドレスを次に表示させるべきセル画像の物に置換え、次の画像への表示時間を取得しておきます。
  3. アニメのパターンを一廻りしたようなら、先頭に戻します。

最後に取得した所要時間が経過したら再度この函数を呼出すようにsetTimeout()函数を実行します。呼出された函数が再度自分を呼出すようにするため、無限に繰返される訳です。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com