[JS] 부드러운 애니메이션을 위한 requestAnimationFrame

requestAnimationFrame은
브라우저의 애니메이션 루프에 최적화된 방식으로 작업을 실행하기 위해 사용
애니메이션이나 화면에서 자주 업데이트해야 하는 요소들을 더 효율적으로 처리할 수 있게 도와줌

출처 https://x.com/SharpShua/status/1733271730091958748?s=20

주요 특징 및 사용법

1. 프레임 동기화: requestAnimationFrame은 브라우저의 디스플레이 주기와 동기화하여 콜백 함수를 실행함
   이는 보통 60fps(초당 60프레임)를 목표로 하며, 모니터의 주사율에 따라 조정됨
2. CPU 효율성: setInterval이나 setTimeout과는 달리 비활성 탭에서는 실행이 멈춤,
   따라서 리소스를 아낌
3. 콜백 전달: requestAnimationFrame은 콜백 함수를 매개변수로 받음.
   이 콜백은 애니메이션 프레임이 준비될 때마다 실행됨.
   
   

기본 사용 예제

function animate() {
    // 애니메이션 프레임마다 실행될 코드 작성
    console.log("Animating...");
  
    // 다음 프레임 요청
    requestAnimationFrame(animate);
}

// 첫 번째 프레임 시작
requestAnimationFrame(animate);​

 

 

위 코드에서는 animate 함수가 매 프레임마다 실행되도록 함
animate 함수 내에서 요소의 위치, 크기 등을 업데이트하면 부드러운 애니메이션을 만들 수 있다!!

실전 예제: 스무스한 박스 이동

const box = document.querySelector(".box");
let pos = 0;

function moveBox() {
    pos += 1;
    box.style.transform = `translateX(${pos}px)`;

    if (pos < 300) {
        requestAnimationFrame(moveBox);  // 목표 위치까지 이동
    }
}

// 첫 번째 프레임 요청
requestAnimationFrame(moveBox);

이 예제에서는 .box라는 요소가 300px까지 오른쪽으로 부드럽게 이동함

일정한 시간차를 두는 비슷한 함수로는 위에서 말했듯 setInterval이 있다

그렇다면 마지막으로 이 둘의 차이는 무엇인지 알아보고 글을 마무리 하겠다!

 

requestAnimationFrame vs setInterval

• requestAnimationFrame은 애니메이션 루프에 최적화되어, 부드럽고 안정적인 화면 업데이트가 가능
• 비활성 탭에서는 중단되어 리소스 절약이 가능
• setInterval은 지정된 간격에 따라 무조건 실행되며,
  화면의 프레임 주기와 맞지 않아 부자연스러운 애니메이션이 될 수 있음!

따라서 웹 애니메이션을 다룰 때는 requestAnimationFrame을 사용하는 것이 일반적인 권장 사항임..!

 

console.log를 함수 내에 찍어보면 엄청난 로그들이 찍히는걸 볼 수 있다!