Window requestAnimationFrame() 메서드

requestAnimationFrame()이 메서드는 브라우저에 애니메이션을 수행하겠다고 알리고 다음 재그리기 전에 지정된 함수를 호출하여 애니메이션을 업데이트하도록 요청합니다.

이 메서드는 다시 그리기 전에 호출할回调 함수를 매개변수로 받습니다.

문법:

window.requestAnimationFrame(callback)

예제

var start = null;
var element = document.getElementById('anim');
function step(timestamp) {
　　if (!start) start = timestamp;
　　var progress = timestamp　-　start;
　　element.style.transform = 'translateX('　+　Math.min(progress　/　10,　400)　+　';
　　if (progress <　20000)　{"}
　　　　　window.requestAnimationFrame(step);
　　}
}
window.requestAnimationFrame(step);

테스트를 보세요‹/›

브라우저 호환성

표에서의 숫자는 requestAnimationFrame() 메서드를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다：

메서드
requestAnimationFrame()	24	23	15	6.1	10

매개변수 값

매개변수	설명
callback	다음 렌더링을 위해 애니메이션을 업데이트할 때 호출되는 함수

기술 세부 사항

반환 값:	한 개의 장整数 값(요청 ID)，콜백 목록에서 항목을 유일하게 식별하는 데 사용됩니다

JavaScript 객체

JavaScript 참조 가이드

JS DOM 참조 가이드

Window requestAnimationFrame() 메서드

문법:

브라우저 호환성

매개변수 값

기술 세부 사항

관련 참조