MDN 번역 | Window: requestAnimationFrame() method

💻 FE/🍓 JS

MDN 번역 | Window: requestAnimationFrame() method

Roy Miller 2025. 3. 21. 19:33

window.requestAnimationFrame() 완벽 정리 (MDN Web Docs)

이 문서는 MDN Web Docs의 window.requestAnimationFrame() 페이지를 기반으로 핵심 내용을 상세하게 정리하고, 이해를 돕기 위해 추가 설명과 예시 코드를 포함합니다.

1. requestAnimationFrame()이란?

정의: window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트(repaint)가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하도록 요청하는 메서드입니다. 즉, 브라우저의 렌더링 주기에 맞춰서 애니메이션을 부드럽게 처리할 수 있게 해주는 API입니다.
동작 방식:
1. requestAnimationFrame()에 콜백 함수를 전달합니다.
2. 브라우저는 다음 리페인트(화면 갱신) 전에 이 콜백 함수를 실행합니다.
3. 콜백 함수 내에서 애니메이션 관련 DOM 조작(스타일 변경 등)을 수행합니다.
4. 필요하다면, 콜백 함수 내에서 다시 requestAnimationFrame()을 호출하여 애니메이션을 계속 진행합니다. (재귀적 호출)
장점:
- 부드러운 애니메이션: 브라우저의 리페인트 주기에 맞춰서 애니메이션을 실행하므로, setInterval이나 setTimeout을 사용하는 것보다 훨씬 부드럽고 자연스러운 애니메이션을 만들 수 있습니다.
- 성능 최적화:
  - 비활성 탭 최적화: 브라우저 탭이 비활성화(백그라운드에 있거나, 최소화된 경우)되면 requestAnimationFrame()은 콜백 함수 실행을 일시 중지하여 CPU/GPU 사용량을 줄입니다. 배터리 소모를 줄이고, 다른 작업에 리소스를 할당할 수 있게 해줍니다.
  - 프레임 속도 조절: 브라우저는 현재 시스템 부하 및 디스플레이 주사율에 맞춰서 requestAnimationFrame() 콜백 호출 빈도를 자동으로 조절합니다. 높은 주사율(high refresh rate) 모니터에서는 더 자주 호출하여 더 부드러운 애니메이션을 제공하고, 낮은 주사율 모니터에서는 불필요한 연산을 줄입니다.
- 동기화: requestAnimationFrame으로 호출되는 콜백함수는, 단일 프레임 안에서 모두 실행됨.
setInterval/setTimeout과의 비교


기능	requestAnimationFrame	setInterval / setTimeout
애니메이션 최적화	브라우저 최적화 (부드러움)	최적화 없음 (끊김 가능성)
비활성 탭 처리	자동 일시 중지 (성능 절약)	계속 실행 (자원 낭비)
호출 주기	브라우저 리페인트 주기	지정된 시간 간격 (밀리초)
정확도	높음 (브라우저에 최적화)	낮음 (시스템 부하에 따라 지연될 수 있음)
주 사용 목적	애니메이션, 부드러운 UI 변화	주기적인 작업, 일정 시간 후 실행 (애니메이션에는 부적합)

2. 구문 (Syntax)

JavaScript

let requestId = window.requestAnimationFrame(callback);

callback: 다음 리페인트 때 호출될 함수입니다. 이 함수는 _단일 인수_로 DOMHighResTimeStamp 값을 받습니다. 이 값은 requestAnimationFrame이 콜백을 실행하기 시작하는 시점의 정밀한 시간(밀리초 단위)을 나타냅니다. performance.now()로 얻은 값과 유사합니다.
requestId: requestAnimationFrame() 호출을 식별하는 고유한 숫자 ID입니다. 이 ID를 cancelAnimationFrame(requestId)에 전달하여 애니메이션을 취소할 수 있습니다.

3. 예제 코드

3.1. 간단한 애니메이션

HTML

<!DOCTYPE html>
<html>
<head>
  <title>requestAnimationFrame Example</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script>
    const box = document.getElementById('box');
    let position = 0;
    let requestId;

    function animate() {
      position += 2; // 이동 거리
      box.style.left = position + 'px'; // CSS 속성 변경 (left)

      if (position < 200) {
          requestId = requestAnimationFrame(animate); // 다음 프레임 요청 (재귀 호출)
      }

    }

    requestId = requestAnimationFrame(animate); // 애니메이션 시작

    // 애니메이션 취소 (예시)
    // setTimeout(() => {
    //   cancelAnimationFrame(requestId);
    // }, 2000); // 2초 후 애니메이션 중지

  </script>
</body>
</html>

animate() 함수는 박스의 left 위치를 변경하여 오른쪽으로 이동시키는 역할을 합니다.
requestAnimationFrame(animate)를 호출하여 애니메이션을 시작합니다.
animate() 함수 내에서 다시 requestAnimationFrame(animate)를 호출하여 애니메이션을 계속 진행합니다. (재귀 호출)
position이 200보다 작을 때만 다음 프레임을 요청하여, 박스가 특정 위치까지만 이동하도록 합니다.
setTimeout과 cancelAnimationFrame을 사용하여, 애니메이션을 중간에 멈출 수 있습니다.

3.2. 시간 기반 애니메이션 (Time-based animation)

requestAnimationFrame 콜백에 전달되는 DOMHighResTimeStamp를 사용하여 시간 기반 애니메이션을 만들 수 있습니다. 이렇게 하면 프레임 속도에 관계없이 일정한 속도로 애니메이션을 실행할 수 있습니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Time-based Animation</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script>
    const box = document.getElementById('box');
    let start = null;
    const duration = 2000; // 애니메이션 지속 시간 (밀리초)

    function animate(timestamp) {
      if (!start) start = timestamp; // 처음 시작 시간을 기록
      const progress = timestamp - start; // 경과 시간 계산

      // 0 ~ 1 사이의 진행률 계산 (duration으로 나누기)
      const normalizedProgress = Math.min(progress / duration, 1);

      // 진행률에 따라 위치 계산 (ease-out 함수 적용)
      const position = easeOutCubic(normalizedProgress) * 300; // 최대 300px 이동

      box.style.left = position + 'px';


      if (progress < duration) {
        requestAnimationFrame(animate); // 다음 프레임 요청
      }
    }

    // Ease-out cubic 함수 (부드러운 감속 효과)
    function easeOutCubic(t) {
      return 1 - Math.pow(1 - t, 3);
    }
    //다른 easing 함수 예시
   /* function easeInOutQuad(t: number): number {
        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }*/

    requestAnimationFrame(animate); // 애니메이션 시작
  </script>
</body>
</html>

animate(timestamp): timestamp 인수는 requestAnimationFrame이 콜백 함수에 전달하는 현재 시간(DOMHighResTimeStamp)입니다.
start: 애니메이션 시작 시간을 저장합니다. animate() 함수가 처음 호출될 때 performance.now()를 사용하여 초기화됩니다.
progress: 시작 시간(start)으로부터 경과된 시간을 계산합니다.
normalizedProgress: 경과 시간을 애니메이션 지속 시간(duration)으로 나누어 0과 1 사이의 진행률을 계산합니다. Math.min을 사용하여 진행률이 1을 넘지 않도록 합니다.
easeOutCubic(normalizedProgress): easing 함수를 사용하여 부드러운 가속/감속 효과를 적용합니다.
position: easing 함수에서 반환된 값을 기반으로, 이동할 거리를 계산합니다.
box.style.left = position + 'px';: 계산된 위치로 박스를 이동시킵니다.
if (progress < duration): 애니메이션이 완료되지 않았으면 requestAnimationFrame(animate)를 다시 호출하여 다음 프레임을 요청합니다.

4. cancelAnimationFrame()

정의: cancelAnimationFrame()은 이전에 requestAnimationFrame()으로 예약된 애니메이션 프레임 요청을 취소하는 메서드입니다.
구문:
```
  window.cancelAnimationFrame(requestId);
```
- requestId: requestAnimationFrame()이 반환한 ID입니다.
JavaScript

예제:

  let requestId = requestAnimationFrame(animate);

  // 애니메이션 취소
  cancelAnimationFrame(requestId);

JavaScript

요약

requestAnimationFrame()은 브라우저 환경에서 부드럽고 효율적인 애니메이션을 구현하는 데 필수적인 API입니다. 브라우저의 리페인트 주기에 맞춰서 애니메이션을 업데이트하므로, setInterval이나 setTimeout을 사용하는 것보다 성능이 좋고 자연스러운 애니메이션을 만들 수 있습니다. cancelAnimationFrame()을 사용하여 애니메이션을 중지할 수 있습니다. 시간 기반 애니메이션을 구현하면 프레임 속도에 관계없이 일정한 속도로 애니메이션을 실행할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

Window: requestAnimationFrame() method - Web APIs | MDN

The window.requestAnimationFrame() method tells the browser you wish to perform an animation. It requests the browser to call a user-supplied callback function before the next repaint.

developer.mozilla.org

'💻 FE > 🍓 JS' 카테고리의 다른 글

바닐라 JS 클래스 삽질 기록: 설계부터 this와의 씨름까지 (0)	2025.04.06
어제는 MVC, 오늘은 바닐라JS로 SPA (0)	2025.04.03
MVC 패턴 익히기 \| 간단한(전혀 간단하지 않다.) 퀴즈 앱 MVC 패턴으로 만들기 (0)	2025.04.02
자바스크립트 불변 객체 \| 상태를 불변하게 업데이트 한다는 건? (0)	2024.03.04
자바스크립트 기본형 데이터와 참조형 데이터 \| 상수는 불변값인가? (2)	2024.03.02

현재글MDN 번역 | Window: requestAnimationFrame() method

yOu gOOd ?!

HTML, 제로베이스스쿨, 제로베이스, 제로베이스내돈내산, z-index, 프로그래머스, 그냥, 인라인요소, 프론트엔드쪽집게취업스쿨, 제로베이스직무부트캠프, 자바스크립트, 블록요소, 코딩테스트, 제로베이스후기, CSS, PADDING, MARGIN, width, 재귀,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

yOu gOOd ?!