[JS] requestAnimationFrame , CSS3 transition 활용

setTimeout이나 setInterval을 사용해서 연속적인 함수 호출로 애니메이션을 구현하는 방법은 약간의 delay가 발생하는 문제가 있다.

이들 함수는 애니메이션을 위해서 생겨난 기능은 아니다.

애니메이션 구현을 위해서는 끊김없이 부드럽게 처리가 돼야 하는데,  다행히도 이를 위한 메서드를 브라우저가 제공하고 있다.

 

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

 

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를 통해서 일정 횟수로 애니메이션이 동작하도록 했지만, 시간값을 이용한다면, 일정시간 안에서만 애니메이션이 

발생하도록 할 수도 있을 것이다. 

 

 

애니메이션 효과는 부드러운 UX를 제공하는 것이 좋다.

버벅거리는 효과는 오히려 답답하고 느린 웹사이트로 인식될 수 있다.

 

CSS 기법으로 애니메이션 구현

transition 을 이용한 방법입니다. 

이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있다.  

특히 모바일 웹에서는 transform을 사용한 element의 조작을 많이 구현합니다.

링크 바로가기

 

더 빠른 css3 애니메이션 관련 속성들

GPU가속을 이용하는 속성을 사용하면 애니메이션 처리가 빠릅니다.

• transform : translateXX();
• transform : scale();
• transform : rotate();
• opacity

아래 링크를 참고해보세요.

링크 바로가기