미리보기

requestAnimationFrame를 이용해서 위와 같이 짧은 애니메이션을 만들었다.

html 코드

 <div>
      <h1 class="value">안녕</h1>
      <img src="./곰돌.png" class="bear" />
</div>

js 코드

  const value = document.querySelector('.value')
    const bear = document.querySelector('.bear')
    let yPos = 0
    let rafId

    function render() {
      value.innerHTML = yPos
      bear.style.transform = `translateY(${-yPos}px)`
      yPos += 10
      rafId = requestAnimationFrame(render)
      //console.log(rafId) 숫자가 늘어난다.

      if (yPos > 500) {
        cancelAnimationFrame(rafId) //멈춰!
      }
    }
    render()

yPos가 500이 되기전에는
rafId = requestAnimationFrame(render)
이 코드가 실행이되어서 render()가 계속 실행됨.
yPos += 10으로 yPos가 증가되면서, bear의 y위치도 바뀌는거임.

requestAnimationFrame(render)를 변수에 지정해서
cancelAnimationFrame(변수)를 통해 멈출수있다.

---

참고 https://www.youtube.com/watch?v=9XnqDSabFjM