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

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 )とすることで子レイヤーの位置を，現在位置から横にｘドット，縦にｙドットずらします．従ってここではmoveBy(-2,0)としているので子レイヤーが-2ドットずつ動いていき，徐々に親レイヤーの表示領域に進入して行きます．その結果，画像が右から左に動いてゆくように見えるわけです．
(4)moveTo( x , y)で座標x，yへレイヤー位置を移動させます．ここでは，子レイヤーのスクロールが完了すると最初に位置に戻しています．

【実行してみよう】











1998(C) Motonari Morikawa