3번째 섹션 인터렉션 구현 - requestAnimationFrame

requestAnimationFrame은 애니메이션 효과를 최적화하는 방법이다.
특히 canvas에서 많이 쓰인다.
브라우저에게 수행하기 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다.
이 메서드는 리페인트하기 전에 실행할 콜백을 인자로 받습니다.

예전에는 setInterval로 이러한 작업을 했었습니다.
하지만 setInterval로 하면,

1. Frame 유실
2. 모바일 배터리 손실

이란 문제점이 있습니다.

requestAnimationFrame(() => {
    console.log(0)
})

console.log(1)

// 1
// 0

equestAnimationFrame은 위에서 보신바와 같이 비동기적으로 실행된다.
그리고 한 번 실행된다.

requestAnimationFrame은 기본적으로 재귀함수 방식(반복호출)으로 실행한다.
requestAnimationFrame 메서드는 호출속도를 초당 60번을 목표로 한다. (60 프레임)
컴퓨터 사양에 따라 좀 느려질 수 있다.

requestAnimationFrame는 setTimeout, setInterval 처럼 실행을 취소할 수도 있다.

let rafId = requestAnimationFrame(callback);
cancelAnimationFrame(rafId);