Web Animation

15 Sep 2021 in Programming on JavaScript

FPS : Frame Per Second

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

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

JS 애니메이션

1. setInterval

   https://helloworldjavascript.net/pages/285-async.html

   • 동기 함수들이 실행된 후에 비동기 함수가 실행된다. 중간에 동기 함수가 들어오면, 비동기가 우선순위가 낮으므로 기다렸다가 실행돼기때문에, setInterval의 정확한 실행이 방해받을 수 있다.

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

2. setTimeout

   • 콜백 함수를 이용해 재귀적으로 자기 자신을 부른다.

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

그러나 setTimeout이나 setInterval을 사용해서 연속적인 함수 호출로 애니메이션을 구현하는 방법은, 딜레이가 있고 적절한 방법이 아니다.

1. 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);
   

2. CSS3 transition

   https://thoughtbot.com/blog/transitions-and-transforms