requestAnimationFrame

kangdari·2020년 6월 15일
0

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);
}

0개의 댓글