js　Timing control for script-basee animations

requestAnimationFrame()

FrameRequestCallbackオブジェクトを引数に取り、スクリプトベースのアニメーションフレームのスケジューリングを行う。

cancelAnimationFrame()

指定したIDのアニメーションフレームのスケジューリングをキャンセルする。

<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<div id="animated_outer">
	<div id="animated">動きます</div>
</div>

#animated_outer {
	position: relative;
}
#animated {
	position: absolute;
	left: 10px;
	padding: 50px;
	background: crimson;
	color: white;
}

var requestId = 0;
function animate(time) {
	document.getElementById('animated').style.left = 
		(time - animationStartTime) % 2000 / 4 + 'px';
	requestId = window.requestAnimationFrame(animate);
}
function start() {
	animationStartTime = window.performance.now();
	requestId = window.requestAnimationFrame(animate);
}
function stop() {
	if(requestId) {
		window.cancelAnimationFrame(requestId);
		requestId = 0;
	}
}