RequestAnimationFrame

자바스크립트에서 애니메이션을 구현하다보면 타이머를 구현한다든지, 스크롤같은 이벤트를 통해 무지성으로 구현한다든지 합니다. 하지만 이러한 구현은 불필요한 콜스택을 쌓게될 것이고 이는 브라우저에게 영향을 줄 것입니다.

이를 해결할 수 있는 방법 중 하나가 requestAnimationFrame입니다.

requestAnimationFrame는 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하는 함수입니다.

RequestAnimationFrame에 대해

requestAnimationFrame는 다음과 같은 이유로 사용됩ㅂ니다.

• 백그라운드 동작 및 비활성화 시 중지를 통한 성능 최적화
• 최대 1초에 60번 동작
• 여러개의 애니메이션을 실행시켜도 타이머를 생성하지 않고 내부 타이머를 사용

사용법

window.requestAnimationFrame(callback);

파라미터

callback
애니메이션에 대한 함수가 들어가야합니다.

리턴값

콜백 리스트의 항목을 정의하는 고유한 요청 ID를 리턴합니다.

취소

애니메이션을 취소하고 싶을 경우에

cancelAnimationFrame(고유ID)

를 통해 취소합니다.

코드

    let rfId = 0![](https://velog.velcdn.com/images/kbm940526/post/9ca2407a-afd9-4b56-aad0-6a8854c1fc84/image.mov)

    function jump(){
            sphereBody.position.y += 0.1

            rfId = requestAnimationFrame(jump)
        if(sphereBody.position.y >5){
            cancelAnimationFrame(rfId)

        }
    }