requestAnimationFrame()
window.requestAnimationFrame() 메소드는 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다.
즉, 브라우저가 매번 화면을 그리는데 변화될 화면을 그릴 준비가 되었을 때 그려줍니다.(최적화?)
그래서 requestAnimationFrame 사용하면 애니메이션을 더 부드럽게 처리가 가능합니다.
( setInterval()을 이용해 구현 시 프레임 유실 및 모바일 배터리 절약 문제가 발생 )
// html
<body>
<img src="./rocket.png" alt="roket" class="rocket" />
<div class="count">1</div>
<script>
const rocket = document.querySelector(".rocket");
const count = document.querySelector(".count");
let yPos = 0;
const render = () => {
count.innerHTML = yPos;
rocket.style.transform = `translateY(${-yPos}px)`;
yPos += 10;
// 반복시킬 함수안에서
// requestAnimationFrame 인자 값으로 해당 함수를 설정
requestAnimationFrame(render);
};
render();
</script>
</body>반복시킬 render 함수 내부에서 requestAnimationFrame()메서드를 작성하고 인자 값으로 render 함수를 설정했습니다.
requestAnimationFrame(render)는 숫자를 리턴합니다.
cancelAnimationFrame()메서드 사용하여 애니메이션을 중단할 수 있습니다.
rafID = requestAnimationFrame(render);
if (yPos > 500) {
cancelAnimationFrame(rafID);
}
