4. Web Animation - FE (1)

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

setInterval을 쓰면 10개의 콜백이 다 실행되지 않을 수 있습니다. 예상과 다르게 동작하는 거긴하죠.하지만 이렇게 동작해서 애니메이션 자체에 큰 문제가 생기는 건 아니니(9개가 실행되는 것이 때론 더 매끄러울 수도 있죠)참고하세요.
물론 setTimeout은 지정한 횟수만큼 동작하는 것이겠죠.

1. 애니메이션

• 애니메이션은 반복적인 움직임의 처리입니다.
• 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식으로 동작하는 방식은 CSS3의 transition과 transform속성을 사용해서 대부분 구현 가능합니다.
• 어느 한 점부터 다른 한 점까지 이동하는 어떤 애니메이션을 자바스크립트로 구현하려면 계속 함수를 호출하여 동작을 시켜 연속적인 움직임을 구현합니다. 반면 CSS transition은 한 번의 호출만으로 자동적으로 애니메이션이 이루어지는 방법들을 제공하고 있습니다.
• 그뿐만 아니라 자바스크립트보다 더 빠른 성능을 보장한다고 합니다. 특히 모바일 웹에서는 CSS를 사용한 방법이 훨씬 더 빠릅니다.

2. FPS

• FPS (frame per second)는 1초당 화면에 표현할 수 있는 정지화면(frame) 수입니다.
• 매끄러운 애니메이션은 보통 60fps 입니다. 따라서 16.666밀리세컨드 간격으로 frame 생성이 필요한 셈이죠. (1000ms / 60fps = 16.6666ms)
• 앞서 말한 것처럼, 애니메이션은 CSS의 transition속성으로 CSS 속성을 변경하거나, JavaScript로 CSS 속성을 변경할 수 있습니다.
• 결국 이렇게 정의할 수 있습니다.
  • 간단하고 규칙적인 애니메이션 → CSS로 변경
  • 세밀한 조작이 필요한 애니메이션 → JavaScript로 변경
• 성능만 봐서는 대체로 CSS로 변경하는 것이 빠릅니다.
• 하지만 성능 비교를 통해서 가장 빠른 방법을 찾는 과정이 필요하기도 합니다.
• 자바스크립트를 변경한다는 것은 자바스크립트로 애니메이션을 일정한 인터벌을 주면서 계속 동작시킨다는 얘기고 자바스크립트만으로 CSS 속성을 이용하지 않고 할 수 있는 건 아닙니다.
• 그래서 자바스크립트로 애니메이션을 계속 돌리면서 만드는 것들을 말하는 것이고 CSS의 transition을 쓰면 자바스크립트를 recursive 하게 짜건 아니면 계속 루프를 돌리면서 반복적으로 어떤 목표치에 닿을 때까지 애니메이션을 직접 움직여주는 한 조작을 하지 않아도 됩니다.

3. JavaScript 애니메이션

• 자바스크립트로 애니메이션을 구현하려면, 규칙적인 처리를 하도록 구현하면 됩니다.
• 다음과 같은 방법이 있습니다.
  • setInterval
  • setTimeout
  • requestAnimationframe
  • Animations API

3.1 setInterval()

• 주어진 시간에 따라서 함수 실행이 가능합니다.

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

 

• 하지만 지연문제가 발생할 수 있습니다. 뭔가 다른 일이 일어나면 interval로 정해진 게 비동기 작업이라 밀립니다. 동기적인 다른 작업이 중간에 들어오거나 하면 밀려서 나중에 실행될 수 있습니다.
• 아래 그림을 보면 제때 일어나야 할 이벤트 콜백이 지연되고, 없어지고 하는 것을 볼 수 있습니다.
• 따라서 setInterval을 사용한다고 해서 정해진 시간에 함수가 실행된다고 보장할 수 없습니다.
• 일반적으로 setInterval 을 사용하는 애니메이션 구현을 잘 하지 않습니다. 말했듯이 동기적 작업에 의해 밀리면 setInterval로 만든 코드가 1초마다 실행되는 게 아니고 나중에 실행될 수가 있습니다. 1초가 아니고 2초 뒤에 실행되거나 이렇게 해서 밀리고, 중간에 끼인 게 날라가 버리고 그러니까 실행이 안 되고 이럴 수가 있습니다. 그러다 보면 애니메이션이 끊길 수가 있습니다. 미세하게 끊기는 게 보일 수도 있고요.

3.2 setTimeout

• setInterval 대신 setTimeout으로 recursive 하게 구현할 수가 있습니다. setInterval은 정기적으로 실행되는 거지만 setTimeout은 지정된 시간 이후에 한 번만 실행되는 코드입니다. 이 코드가 재귀 호출을 시키면 끝난 다음에 또 부르고, 끝난 다음에 또 부르고, 끝난 다음에 또 부르고... 그렇게 해서 계속 호출할 수가 있습니다.

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

 

• 애니메이션을 구현하려면 재귀호출을 해서 구현할 수 있습니다. 아래 코드는 자주 쓰이는 방법입니다.

let count = 0; function animate() {     setTimeout(() => {     if(count >= 20) return;     console.log('현재시각은', new Date());     count++;     animate();   },500); } animate();

 

• setTimeout의 장점은 재귀호출 도중 생략되는 함수가 없습니다. setInterval은 중간에 있는 콜백 함수가 누적이 되면 쌓여있던 게 하나가 없어지고 마지막 게 실행될 수 있습니다. 반면 setTimeout은 함수가 끝난 다음에 그 다음 것을 실행하기 때문에 명확하게 먹히는 거 없이 계속 순차적으로 콜백들이 약간 시간이 지연되더라도 실행은 될 수가 있습니다.
• 그러나 setTimeout도 엄밀하게는 어떤 이유로 인해 제때에 원하는 콜백함수가 실행되지 않을 수는 있습니다. 결국 setInterval과 같은 문제가 발생할 수도 있긴합니다. 하지만 그럼에도 setTimeout은 매 순간 timeout을 조절할 수 있는 코드구현으로 컨트롤 가능한 부분이 있다는 점이 setInterval과 큰 차이라고 할 수 있습니다.

3.3 requestAnimationFrame

• setTimeout은 animation을 위한 최적화된 기능이라 보기 어렵습니다.
• animation주기를 16.6미만으로하는 경우 불필요한 frame 생성이 되는 등의 문제가 생깁니다.
• 대안으로 나온 것이 requestAnimationFrame입니다.

생각해보기

• 동일한 요구사항을 만들고, setInterval로 애니메이션을 했을 경우와 setTimeout으로 애니메이션을 구현했을 경우를 비교해보면서 실험해보면 좋습니다.

참고 자료

[참고링크] Scheduling 참고 글과 예제   https://javascript.info/settimeout-setinterval