JavaScriptによるアニメーションの基礎

JavaScript

JavaScriptでDOMを操作してアニメーションを実現する。アニメーションの基礎の基礎。まずは、こんなhtmlを用意する。

<body onload="init()">
	<div id="board" style="position:relative;overflow:hidden;width:500px;height:300px;background-color:gray;">
		<div id="pin" style ="position:absolute;left:100px;">●</div>
	</div>
	
</body>

idがboardとなっているdiv要素がアニメーションの描写領域。これをはみ出した部分は描写されない。次にidがpinとなっているdiv要素が、今回動く物体。黒い丸。

var y = 0;
var x = 0;
var pin;

function init(){
	pin = document.getElementById("pin");
	pin.style.y = y + "px";
	setInterval(update,10);
}

function update(){
	y += 1;
	x += 2;
	
	pin.style.top = y + "px";
	pin.style.left = x + "px";
}

あとはsetIntervalで1000分の10秒に一回、updateを呼び出して、pin要素のスタイルの座標を変更。ちなみにhtmlの方で、ちゃんとpositionをabsoluteにしておかないと、いくらtopとleftを変更しても動かない。実行すると黒丸が右下の方向に飛んでいく。描写領域の端まで来ると見えなくなる。