window.requestAnimationFrame(callback)
브라우저 화면이 업데이트되기 전에 등록한 콜백 함수를 수행해 애니메이션을 부드럽게 넘겨주는 효과를 준다. 애니메이션을 알리고 다음 repaint가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 된다.
CSS의 transition으로 처리하기 어려운 애니메이션을 구현하거나, 1초에 60번 동작한다는 장점을 가지고 있으며, Canvas에 많이 사용이 된다.
기존의 JavaScript에서 애니메이션 효과를 주기 위해서 setTimeout()이나 setInterval()을 이라는 함수를 반복적으로 실행하여 코드를 실행했다면, 애니메이션 프레임 사이의 일관되지않는 딜레이나 layout trashing을 발생시킬 수 있다는 문제점이 있다.
window.requestAnimationFrame와 setTimeout 함수와 다른 점은 브라우저가 실행 시기를 결정한다는 것이고, setInterval 함수와 다른 점은 스스로 반복해서 호출하지 않는다는 점이다. 스스로를 반복 호출하지 않기 때문에, window.requestAnimationFrame 함수로 다음 함수를 반복하려면, 재귀적으로 window.requestAnimationFame 함수를 다시 호출해 줘야 한다.
requestAnimationFrame안에 render함수를 callback해줌으로써 숫자가 올라가는 애니메이션효과를 나타내었다. 실행 중인 효과를 중지시킬 수도 있는데, 변수를 만들어주고 cancelAnimationFrame에 매개변수로 넘겨주면 된다.
