requestAnimationFrame활용

• 들어가기 전에 setTimeout이나 setInterval을 사용해서 연속적인 함수 호출로 애니메이션을 구현하는 방법은 약간의 delay가 발생하는 문제가 있습니다. 이들 함수는 애니메이션을 위해서 생겨난 기능은 아닙니다. 애니메이션 구현을 위해서는 끊김없이 부드럽게 처리가 돼야 하는데, 다행히도 이를 위한 메서드를 브라우저가 제공하고 있습니다. 무엇인지 알아보죠.

학습 목표

1. requestAnimationframe 를 사용해서 최적화된 타이밍에 animation 관련 함수가 실행되도록 합니다.

핵심 개념

• requestAnimationframe

학습하기

1. requestAnimationFrame

setTimeout은 animation을 위한 최적화된 기능이라 보기는 어렵습니다. animation 주기를 16.6미만으로 하는 경우 불필요한 frame 생성이 되는 등의 문제가 생깁니다. 그 대안으로 생긴 것이 바로 requestAnimationFrame입니다. 아래 예제를 살표보시죠. 먼저 아래처럼 requestAnimationFrame 을 한번 실행시캬줘야 합니다. 그 이후에 특정 조건이 될 때까지(함수의 탈출 조건) 계쏙 함수를 연속적으로 호출하는 것이죠. 이렇게 requestAnimationFrame 함수를 통해서 원하는 함수를 인자로 넣어주면, 브라우저는 인자로 받은 그 비동기 함수가 실행될 가장 적절한 타이밍에 실행될 가장 적절한 타이밍에 실행시켜줍니다. 우리는 어느 정도 브라우저를 믿고 이 함수를 전달해주는 것입니다. `var count = 0; var el=document.querySelector(".outside"); el.style.left = "0px";

function run() { if(count > 70) return; count = count + 1; el.style.left = parseInt(el.style.left) + count + "px"; requestAnimationFrame(run); }

requestAnimationFrame(run);` 예제에서는 연속적으로 requestAnimationFrame를 통해서 run함수를 호출하면서 left 값을 증가시켜주고 있습니다.(횟수로 70회까지 테스트하는 코드입니다.) canvas, svg를 사용하면서 그래픽 작업을 하게 될 때 복잡한 애니메이션을 다룰 칠요가 생길 수 있습니다. 자바스크립트로 복잡한 애니메이션처리를 해야 할 때 requestAnimationFrame은 꽤 유용하게 쓰일 수 있습니다.

count 를 통해서 일정 횟수로 애니메이션이 동작하도록 했시만, 시간값을 이용한다면, 일정시간안에서만 애니메이션이 발생하도록 할 수도 있을 것입니다. 아래 참고링크 MDN사이트의 예제를 살펴보세요!.

생각해보기

1. requestAnimationFrame 을 통한 함수호출을 여러 번 해보면 어떨까요? 예를 들어 requestAnimationFrame(run), 그리고 requestAnimationFrame(run2)이런 식으로 1개 이상의 애니메이션 동작을 한 페이지에서 구현하면 어떤 결과가 나올지 확인해보세요. 많을 수 록 테스트가 더 의미 있을 겁니다. 브라우저마다 결과가 다를 수 있지만, 아마도 브라우저는 처리해야 할 애니메이션 함수들을 열심히 호출하면서 최대한 자연스러운 애니메이션 결과를 보여주려고 할 겁니다. 이런 상태에서 더욱더 requestAnimationFrame이 의미가 있다고 봐야겠습니다.