웹 애니메이션, setTimeout

애니메이션: 반복적인 움직임의 처리

웹UI 애니메이션은 자바스크립트로 제어할 수 있지만, 규칙적이고 비교적 단순한 방식으로 동작되는 방식은 CSS3의 transition과 transform 속성을 활용해서 구현 가능하다. 뿐만 아니라 자바스크립트보다 더 빠른 성능을 보장한다.

특히 모바일 웹에서는 CSS를 사용한 방법이 훨씬 빠르다.

 

FPS (frame per second)

FPS : 1초에 화면에 표현할 수 있는 정지화면(frame) 수

매끄러운 애니메이션은 보통 60fps이다. 따라서 16.666초 간격으로 frame 생성이 필요하다. 

 

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

세밀한 조작이 필요한 것 > JavaScript로 변경

 

JavaScript 애니메이션

- setInterval
- setTimeout
- requestAnimationframe
- Animations API

 

const interval = window.setInterval(()=>{

console.log('현재시각은', new Date());

}, 1000/60);

 

window.clearInterval(interval);

 

이 경우 지연 문제가 발생할 수 있다.

제때 일어나야 할 이벤트 콜백이 지연되고, 없어지고 할 수 있다.

따라서 setInterval을 사용한다고 해서 정해진 시간에 함수가 실행된다고 보장할 수 없다. 일반적으로 setInterval을 사용하는 애니메션 구현을 잘 하지 않는다.

 

 

 

setTimeout

 

 

 

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

setTimeout도 어떤 이유로 제때에 원하는 콜백함수가 실행되지 않을 수도 있다. 하지만 그럼에도 setTimeout은 매 순간 tmeout을 조절할 수 있는 코드 구현으로 컨트롤 가능한 부분이 있는 점이 setInterval과의 차이이다. 

 

 

 

 

 

 

 

참고 : boostcourse    https://www.boostcourse.org/web316/lecture/16752?isDesc=false

웹 프로그래밍(풀스택)

 

https://javascript.info/settimeout-setinterval

Scheduling: setTimeout and setInterval