[Javascript] requestAnimationFrame

#Javascript

이건 애니메이션이나 그래픽 처리 등에 매우 유용한 브라우저 내장함수다.

window.requestAnimationFrame(콜백함수)

기본적인 원리는 간단한데, 콜백을 받아서 그냥 브라우저가 렌더링을 하기 직전에 실행시켜줄 뿐이다.
항상 렌더링 전에만 호출되니 불필요한 연산이나 헛박자 없이 딱딱 타이밍에 맞춰서 데이터를 세팅하고 부드럽게 보여줄 수가 있다.

이걸 이용해서 캔버스 렌더링을 한다면, 이런식으로 할 수 있을 것이다.

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    <script>
        function drawCircle(color) {
            const canvas = document.getElementById("canvas");
            const context = canvas.getContext("2d");

            context.beginPath();
            context.arc(100, 75, 50, 0, 2 * Math.PI);
            context.fillStyle = color 
            context.fill()
            context.stroke();
        }

        let red = '#ff0000'
        let blue = '#0000ff'

        let color = red;

        function animationEvent(timestamp){
            if (color === red) {
                console.log(1)
                color = blue
            } else {
                console.log(2)
                color = red
            }

            drawCircle(color)

            window.requestAnimationFrame(animationEvent);
        }

        window.requestAnimationFrame(animationEvent);
    </script>
</html>

requestAnimationFrame는 하나의 이벤트만 실행하면 그대로 그만이기 때문에, 여기서는 재귀호출로 계속해서 트리거를 걸도록 했다.

그럼 이렇게 계속 색이 바뀔 것이다.
내 녹화 프로그램이 렌더링 속도를 못따라가서 천천히 바뀌는 것처럼 보이는데, 실제로는 교체속도가 너무 빨라서 보라색으로 보였다.
그렇다.

참조
https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame