자바스크립트로 Web Animation 구현하기

JavaScript로 애니메이션을 구현하려면 규칙적인 처리를 하도록 구현하면 된다.

 

 

 

이런 규칙적인 처리를 위한 메서드는 다음과 같다.

• setInterval
• setTimeout
• requestAnimationframe
• Animation API

 

 

 

1. setInterval()

 

setInterval의 첫 번째 인자는 반복적으로 실행할 함수, 두 번째 인자는 반복할 시간이다.

 

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

window.clearInterval(interval); //setInterval 종료
//window. 생략 가능

 

하지만 setInterval 함수는 비동기 함수로, 마우스 클릭 이벤트 같은 동기적인 작업이 중간에 들어오면 setInterval 같은 비동기 작업은 밀리게 된다. 이런 이유로 정해진 시간에 함수가 실행된다고 보장할 수 없다.

 

 

 

 

2. setTimeout()

 

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

 

setTimeout은 한 번 실행하고 종료되므로, 재귀 함수로 반복적으로 호출하여 사용할 수 있다.

 

setTimeout도 setInterval처럼 원하는 시간에 콜백 함수가 실행되지 않을 수 있다. 하지만 매 순간 timeout을 조절할 수 있는 코드를 구현하여 컨트롤이 가능하다.

 

 

 

 

3. requestAnimationFrame()

 

위의 setInterval과 setTimeout은 애니메이션에 최적화된 기능이 아니며, 약간 delay 될 수 있다는 단점이 있었다.

 

requestAnimationFrame은 브라우저에서 제공하는 animation을 위한 메서드이다. requestAnimationFrame으로 좀 더 정확한 애니메이션을 구현할 수 있다.

 

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); //window.은 생략 가능

 

예제 코드는 requestAnimationFrame으로 run 함수를 호출하며 left 값을 증가시키는 코드이다.

 

예제에선 count 변수로 일정 횟수가 될 때까지 애니메이션이 동작되도록 했지만, 시간 값을 사용하여 일정 시간 안에서만 애니메이션이 발생하도록 할 수도 있을 것이다.

 

 

 

 

4. Animation API

 

문법 : element.animate(keyframes, options);

 

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' }, 
  { transform: 'translateY(-300px)' }
], { 
  // timing options
  duration: 1000,
  iterations: Infinity
});

 

예제 출처이며, 이 곳에서 timing options와 지원되는 브라우저를 확인할 수 있다.

 

 

 

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

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

- requestAnimationFrame 활용