レイヤーを使ったアニメーション.

Index

レイヤー2つを入れ子にして,画像が右から現れ,左へ動いていく,アニメーションです.

[例]

	<form>
	<input type=button value="押してね" onclick="Draw();">
	</form>

	<layer id="pl" clip="0,0,247,17">		//(1)
		<layer id="cl" top=0 left=247 clip="0,0,247,17">		//(2)
		<img src="../img/btn20.gif">
		</layer>
	</layer>
	<script language="JavaScript">
	<!--
	var pLayer = document.layers["pl"];
	var cLayer = pLayer.document.layers["cl"];
	count = 0;
	function Draw(){
		count++
		cLayer.moveBy( -2 , 0 );		//(3)
		setTimeout("Draw()" , 10 );
		if( count > 247 ){
			count=0;
			cLayer.moveTo( 247, 0 );	//(4)
		}
	}
	//-->
	</script>
	

【解説】

(1)親レイヤーの設定.clip="0,0,247,17"とすることにより,表示領域を247×17(anime.gifのサイズと等しい)の長方形に設定.
(2)子レイヤーの設定.top=0,left=247とすることで,子レイヤーがちょうど親レイヤーの右に247ドットずれた位置に設定される.すなわち親レイヤーの右上の点が,子レイヤーの左上の点と合致する.
(3)moveBy( x , y )とすることで子レイヤーの位置を,現在位置から横にxドット,縦にyドットずらします.従ってここではmoveBy(-2,0)としているので子レイヤーが-2ドットずつ動いていき,徐々に親レイヤーの表示領域に進入して行きます.その結果,画像が右から左に動いてゆくように見えるわけです.
(4)moveTo( x , y)で座標x,yへレイヤー位置を移動させます.ここでは,子レイヤーのスクロールが完了すると最初に位置に戻しています.

【実行してみよう】












1998(C) Motonari Morikawa