간단한 소개
requestAnimationFrame 함수는 setInterval과 setTimeout 을 대신해 애니메이션을 부드럽게 만들어주는 고마운 내장함수 입니다. 허나 Interval과 Timeout처럼 직접적으로 프레임이 반복되는 시간을 정할 수 없기에 애니메이션을 만들 경우 지정된 프레임을 만들기 어려운 경우가 많습니다.
animationFrame 은 이러한 어려운 접근을 쉽게 변화시켜줄 것입니다.
다운로드
첫번째로는 Javascript 파일을 원하는 경로에 적용해주세요. 기본적인 다운로드 파일을 받아보시면 적용되어있으나, 사용할 프로젝트에 원하는 경로가 존재한다면 그에 맞게 경로만 바꿔주시면 됩니다. 그 다음은 CSS 파일도 동일한 방식으로 원하시는 폴더내에 삽입하여 주신 후 경로를 맞춰주시면 됩니다.
경로 설정의 예
<head>
	<title>Main Page</title>
	<script src="./js/animationframe.min.js"></script>
</head>
위처럼 HEAD에 경로를 추가하여 사용할 수 있습니다. 위에 설명한것 처럼 경로는 예시일 뿐이며 정해놓은 경로가 있다면 원하는 경로로 지정하여 파일을 불러오시면 됩니다.
팝업 띄우기 실행방법
<script>
	var anim == new animationFrame( 30 , function ( timer ) {
		// 애니메이션이 도는동안 작성하고 싶은 코드를 삽입합니다.
	}) ; 
</script>
기본적인 애니메이션프레임을 실행하는 방법입니다. 간단히 new 생성자를 호출하는 것으로 애니메이션을 실행할 수 있습니다. 콜백함수안에 원하는 코드를 삽입하여 애니메이션을 실행하여주시면 됩니다. 콜백함수의 전달값으로 현재 애니메이션 정보를 전달 받는데 필요한 경우 사용할 수 있습니다. 이 옵션들을 확인하고 싶은 경우엔 animationFrame Reference 에서 제공하는 옵션들을 확인하여 추가하실 수 있습니다.
마치며.
이게 다입니다.;; 브라우저에 원하는 옵션에 원하는 값으로 애니메이션을 작성해보세요. 사용자 설명이 되어있는 예제를 보고싶으시다면 EXAMPLE 에서 확인하세요.