기본 호출 방식

사용자가 animationFrame 을 브라우저 페이지내에 로드 하였다면 아무때나 애니메이션 프레임을 실행할 수 있습니다.

<script> 
new animationFrame( 30 , function ( timer ) {
	// 원하는 애니메이션 작동 코드
}) ; 
</script>

함수 사용법은 각각의 애니메이션이 돌 수 있도록 new 연산자로 새롭게 작성해주면 되며, 함수의 인자 값으로는

원하는 프레임 수 ( 1 ~ 60 ) 사이의 fps 와
콜백함수가 지원됩니다. 콜백함수에 원하는 코드를 삽입하여주세요.

프레임을 지정해보아요

애니메이션 속도를 1fps 로 지정하였을 경우의 프레임이 실행되는것을 확인할 수 있습니다.

<script> 
function draw_fps1 () {
	new animationFrame( 1 , function ( timer ) {
		console.log( timer.counter + ' , ' + timer.time_el + ' , ' + timer.fps ) ; 
	}) ; 
}
</script>
</script>

현재 애니메이션 속도 :



아래는 보통 게임에서 자주 활용되는 30fps를 지정한 테스트 입니다.

<script> 
unction draw_fps30 () {
	new animationFrame( 30 , function ( timer ) {
		console.log( timer.counter + ' , ' + timer.time_el + ' , ' + timer.fps ) ; 
	}) ; 
}
</script>

현재 애니메이션 속도 :

애니메이션 속도를 30fps 로 지정하였을 경우의 프레임이 실행되는것을 확인할 수 있습니다.



애니메이션의 꽃 60fps 테스트를 확인할 수 있습니다.

<script> 
unction draw_fps60 () {
	new animationFrame( 60 , function ( timer ) {
		console.log( timer.counter + ' , ' + timer.time_el + ' , ' + timer.fps ) ; 
	}) ; 
}
</script>

현재 애니메이션 속도 :

애니메이션을 멈춰보아요.

실행된 애니메이션은 사용자가 원하는 때에 멈출 수 있어야 합니다. new 연산자로 생성된 애니메이션 프레임은 전달받는 변수에 프로토타입으로 내장함수가 지정되어있습니다. 내장함수 stop 으로 애니메이션을 멈추게 합니다.

<script> 
unction draw_fps60 () {
	var testLoop = new animationFrame( 60 , function ( timer ) {
		console.log( timer.counter + ' , ' + timer.time_el + ' , ' + timer.fps ) ; 
	}) ; 
}

// 함수를 멈추고 싶은경우
testLoop.stop() ; 
</script>

현재 애니메이션 속도 :


직접 애니메이션을 작성해 보아요

프레임이 돌아가는것을 확인해보았으니 직접적으로 애니메이션이 프레임에 따라 어떻게 동작하는지도 확인할 수 있습니다.
아래 코드에 샘플을 달아두었습니다.