Box Out of Brain
常に覚えてなくてもいいけど時々大事なこと by うるま(うるまでるび)
2012年3月15日
JavaScriptでアニメーションを実現
JavaScriptでパラパラアニメを作るには、下記のコードを<body>内のアニメしたい場所に設置する。
iPhoneなど、Flash未対応のガジェットでアニメーションを実現できる。
作例
<!---------------------- JavaScript Animation ------------------------> <img name="anim" src="01.png" /> <!--1枚目を表示--> <script language="javaScript"> <!-- // 準備 var currentFrame=0; // 現在フレーム frameDuration = 75; // フレームの表示秒数(msec) img=new Array(); // ArrayにイメージのURLを格納 img[0]="01.png"; // [0]から始めること img[1]="02.png"; img[2]="03.png"; img[3]="04.png"; img[4]="05.png"; img[5]="06.png"; img[6]="07.png"; img[7]="08.png"; img[8]="09.png"; img[9]="10.png"; img[10]="11.png"; img[11]="12.png"; // 実行 frameCount = img.length - 1; // 総フレーム数を計算 flipAnim(); //function呼び出し // 一定時間ごとに絵を変える function flipAnim(){ setTimeout("flipAnim()",frameDuration); document.anim.src=img[currentFrame]; if(currentFrame<frameCount){ ++currentFrame; }else{ currentFrame=0; } } //--> </script> <!-- end of JavaScript Animation -->
0 件のコメント:
コメントを投稿
次の投稿
前の投稿
ホーム
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿