티스토리 뷰

부스트코스 웹 프로그래밍/3. 웹 앱 개발: 예약서비스 1

4. Web Animation - FE (2)

haaak 2019. 8. 2. 18:06

2) requestAnimationFrame 활용

1. requestAnimationFrame

  • setTimeout은 animation을 위한 최적화된 기능이라 보기는 어렵습니다.
  • setTimeout은 한 번 실행되는 함수입니다. setTimeout 함수를 재귀 호출하면서 setInterval을 좀 더 보완할 수 있지만 문제가 뭐냐면 어떤 정해진 시간 내에 재귀 호출하는, 반복적인 작업을 해야 한다는 것입니다. 그리고 animation주기를 16.6 미만으로 하는 경우 불필요한 frame 생성이 되는 등의 문제도 생깁니다.
  • 그 대안으로 생긴 것이 바로 requestAnimationFrame입니다. 좀 더 자연스럽게 브라우저가 적절한 타이밍에 조절해주며, setTimeout 재귀 호출하는 것을 좀 더 개선한 방법으로 적절한 타이밍에 애니메이션을 최적화해서 렌더링 하는 방식입니다. 그러니까 애니메이션을 위한 전용 함수죠. requestAnimationFrame은 setTimeout처럼 시간 지정을 할 필요도 없습니다. 함수가 알아서 지정해줍니다.
  • requestAnimationFrame를 실행하는 예제를 보겠습니다.
  • 먼저 아래처럼 requestAnimationFrame을 한번 실행시켜줘야 합니다.
  • 그 이후에 특정 조건이 될 때까지(함수의 탈출 조건) 계속 함수를 연속적으로 호출하는 것이죠.
  • 이렇게 requestAnimationFrame함수를 통해서 원하는 함수를 인자로 넣어주면, 브라우저는 인자로 받은 그 비동기 함수가 실행될 가장 적절한 타이밍에 실행시켜줍니다. 우리는 어느 정도 브라우저를 믿고 이 함수를 전달해주는 것입니다. 
  • requestAnimationFrame은 60FPS로 동작합니다.

<html>

<header>

<style>

.outside{

position: relative;

background-color: blueviolet;

width: 100px;

font-size: 0.8em;

color: #fff;

}

</style>

</header>

<body>

<div class="outside">제가 좋아하는 과일은요..</div>

</body>

</html>

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"; //inline(HTML의 left값)으로 값이 들어감.

   requestAnimationFrame(run);

}

 

requestAnimationFrame(run); //함수를 인자로 넣고 호출합니다.

 

  • 예제에서는 연속적으로 requestAnimationFrame를 통해서 run함수를 호출하면서 left 값을 증가시켜주고 있습니다(횟수로 70회까지 테스트하는 코드입니다.)
  • canvas, svg를 사용하면서 그래픽 작업을 하게 될 때 복잡한 애니메이션을 다룰 필요가 생길 수 있습니다.
  • 자바스크립트로 복잡한 애니메이션처리를 처리해야 할 때 requestAnimationFrame은 꽤 유용하게 쓰일 수 있습니다.
  • count를 통해서 일정 횟수로 애니메이션이 동작하도록 했지만, 시간값을 이용한다면, 일정시간안에서만 애니메이션이 발생하도록 할 수도 있을 것입니다. 아래 참고링크 MDN사이트의 예제를 살펴보세요!

생각해보기

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

참고 자료

[참고링크] window.requestAnimationFrame()
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

 

'부스트코스 웹 프로그래밍 > 3. 웹 앱 개발: 예약서비스 1' 카테고리의 다른 글

5. WEB UI - FE (1)  (0) 2019.08.03
4. Web Animation - FE (3)  (0) 2019.08.02
4. Web Animation - FE (1)  (0) 2019.08.02
3. Ajax - FE (2)  (0) 2019.08.02
3. Ajax - FE (1)  (0) 2019.08.02
공유하기 링크
Comments
Related Articles more