웹 애니메이션 이해와 setTimeout 활용

• 들어가기 전에

웹 사이트의 애니메이션 구현은 어떻게 할까요? JavaScript와 CSS를 다루면서 웹 애니메이션을 구현하는 방법을 익혀보자

• 학습 목표

1. setInterval 애니메이션의 문제를 이해한다.

2. setTimeout을 사용한 재귀호출 방식의 애니메이션을 이해한다.

• 핵심 개념

- setTimeout 기반 애니메이션 방식

• 애니메이션

애니메이션은 반복적인 움직임의 처리이다. 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식으로 동작하는 CSS3의 transition과 transform 속성을 사용해서 대부분 구현이 가능하다. 그 뿐만 아니라 자바스크립트보다 더 빠른 성능을 보장한다. 특히 모바일 웹에서는 CSS를 사용한 방법이 훨씬 더 빠르다.

• FPS(Frame Per Second)

FPS는 1초당 화면에 표현할 수 있는 정지화면(frame) 수 이다. 매끄러운 애니메이션은 보통 60fps다. 따라서 16.666 밀리세컨드 간격으로 frame 생성이 필요한 셈이다. 앞서 말한 것 처럼, 애니메이션은 CSS의 transition 속성으로 CSS 속성을 변경하거나, JavaScript로 CSS 속성을 변경할 수 있다.

- 간단하고 규칙적인 것 → CSS로 변경

- 세밀한 조작이 필요한 것 → JavaScript로 변경(자바스크립트로 애니메이션을 일정한 interval을 주면서 계속 동작시키는 것)

성능만 봐서는 대체로 CSS로 변경하는 것이 빠르지만, 성능 비교를 통해 가장 빠른 방법을 찾는 과정이 필요하기도 하다.

• JavaScript 애니메이션

자바스크립트로 애니메이션을 구현하려면, 규칙적인 처리를 하도록 구현하면 된다.

- setInterval

- setTimeout

- requestAnimaitionframe

- Animation API

• setInerval()

//arrow 함수 사용
const interval = window.setInterval(()=> {
  console.log('현재 시각은 : ', new Date());
}, 1000/60);
 
window.clearInterval(interval);

- 정기적으로 실행

- 주어진 시간에 따라 함수 실행이 가능하지만, 일반적으로 setInterval을 사용해서 애니메이션을 구현하지는 않는다.

지연문제가 발생할 수 있다. 아래 그림을 보면 제때 일어나야 할 이벤트 콜백이 지연되고, 없어지고 하는 것을 볼 수 있따. 따라서 setInterval을 사용한다고 해서 정해진 시간에 함수가 실행된다는 보장은 없다.

• setTimeout()

//arrow 함수 사용
setTimeout(() => {
    console.log('현재 시각은 : ', new Date());
} ,500);

- 애니메이션을 구현하려면 재귀호출을 해서 구현할 수 있다.

const interval = window.setInterval(()=> {
  console.log('현재 시각은 : ', new Date());
}, 1000/60);
 
window.clearInterval(interval);

- 지정된 시간 이후에 한번만 실행

- setTimeout도 엄밀하게는 어떤 이유로 인해 제때에 원하는 콜백함수가 실행되지 않을 수는 있다. 결국 setInterval과 같은 문제가 발생할 수도 있다. 하지만 그럼에도 setTimeout은 매 순간 timeout을 조절할 수 있는 코드구현으로 컨트롤 가능한 부분이 있다는 점이 setInterval과 큰 차이라고 할 수 있다.