애니메이션

애니메이션을 구현하기위해 필요한 JavaScript의 WebAPI에는 window.requestAnimationFrame이라는 비동기 함수가있다. 처리하기 어려운 애니메이션, canvas, svg등의 애니메이션을 구현하기 위해 사용하는 함수이다. 이 함수는 기본적으로는 1초에 60번, 보통 모니터에 주사율에 맞추어 함수를 실행하게 되어있다.

재미있는점은, requestAnimationFrame은 같은 비동기 함수인 window.setTimeout 함수와 다르게 브라우저가 실행 시기를 결정한다는 것이고, window.setInterval 함수와도 달리 스스로 반복해서 호출하지 않는다는 점이 다르다. 스스로를 반복 호출하지 않기 때문에 requestAnimationFrame 함수로 다음 함수를 반복하려면, 재귀적으로 requestAnimationFrame 함수를 다시 호출해 줘야한다.

const el = document.querySelector('div');
let right = 0;
 
function frame() {
    right += 0.1;
    el.style.setProperty('transform', 'translateX(' + right + 'px)');
 
    if (right < 200){
    window.requestAnimationFrame(frame)}
}

// 함수 반복을 위해서, 함수 호출 
window.requestAnimationFrame(frame);

이런식으로 코드를 작성해주면, right 값이 200 미만일 때만 재귀 함수를 호출하도록 하여, 딱 200픽셀만 움직이고 애니메이션이 더는 실행되지 않게된다.

source:https://blog.eunsatio.io/develop/JavaScript-window.requestAnimationFrame-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC