rAF 프레임 비율 조절하기

 

 

📌 requestAnimationFrame의 초당 프레임 조절하기

requestAnimationFrame(이하 rAF) 을 이용해서 JavaScript 애니메이션을 구현하는데, 성능상의 이유로 초당 프레임(FPS) 을 조절해야 하는 상황이 생겼습니다.

다른 타이머 함수들(setInterval, setTimeout)을 사용하지 않고 rAF 에서 초당 프레임을 조절하는 방법을 구현해 봤습니다.

 

animation tick

간단하게 FPS 에 대해서 알아보고 원하는 FPS 를 위한 tick 을 구해봅시다.

 

const tick = 1000 / fps

 

1초당 60 프레임을 원한다면 1000 / 60 = 16.6ms 마다 하나의 프레임을 그려야 함을 의미합니다.

여기서 목표한 프레임 비율을 위해서 하나의 프레임을 그리는데 필요한 시간을 tick 이라고 하겠습니다.

이제 루프 실행 부분을 구현합니다.

60fps(16.6ms) 로 실행되는 rAF 루프에서 tick 에 도달한 경우에만 drawFn 을 호출합니다.

 

let startTime = Date.now() // ✅ 루프 시작 시간을 설정합니다.
loop()

function loop() {
  animationId = requestAnimationFrame(_loop)

  const now = Date.now()
  const elapsed = now - startTime

  if (elapsed > tick) {
    startTime = now - (elapsed % tick) // ✅ rAF의 배수가 되지 않도록 값을 보정해준다.
    drawFn()
  }
}

 

그리고 elapsed % tick 에 해당하는 값을 빼준 값으로 현재 시간을 갱신합니다.

이를 통해 기존 타이머의 배수가 되지 않도록 보정해 주게 됩니다.

 

타이머 시작, 중지, 초기화

루프를 시작, 종료할 수 있는 함수를 포함하는 객체를 반환하도록 변경해 봅시다.

이를 위한 함수 본체 구현은 내부 함수로 제공합니다.

 

function createAnimationLoop({
  drawFn,
  immediate,
}: {
  drawFn: () => void
  immediate?: boolean
}): AnimationLoop {
  const fps = 1  // ✅ 1초당 1프레임을 그린다.
  const tick = 1000 / fps

  let animationId: number
  let startTime: number

  function _init() {
    startTime = Date.now()

    if (immediate) {
      drawFn()
    }
  }

  function _loop() {
    animationId = requestAnimationFrame(_loop)

    const now = Date.now()
    const elapsed = now - startTime

    if (elapsed > tick) {
      startTime = now - (elapsed % tick) // ✅ rAF의 배수가 되지 않도록 값을 보정해준다.
      drawFn()
    }
  }

  return {
    start: function _start() {
      _init()
      _loop()
    },
    stop: function _stop() {
      if (animationId !== -1) {
        cancelAnimationFrame(animationId)
        animationId = -1
      }
    },
  }
}

 

loop 시작 시 초기에 한번 실행할 수 있도록 immediate 옵션을 추가해 줬습니다.

 

사용 예시

React 와 함께 사용한다면 다음과 같이 적용할 수 있습니다.

 

function useAnimation() {
  const loop = useRef()

    useEffect(() => {
    loop.current = createAnimationLoop(animate)

    if (/** 조건에 도달한다면 */) {
      loop.current.start()
    } else {
      loop.current.stop()
    }
  }, [])
}

 

📌 참고자료

Controlling fps with requestAnimationFrame?