자바스크립트 async/await를 이용한 애니메이션 처리

10 Sep 2023

javascript

자바스크립트는 웹 애플리케이션에서 동적인 애니메이션 효과를 제공하기 위해 사용되는 강력한 언어입니다. 애니메이션 처리는 일반적으로 setTimeout(), setInterval() 또는 requestAnimationFrame()과 같은 함수들을 사용하여 구현될 수 있습니다. 그러나 이러한 함수들을 사용하면 콜백 지옥(callback hell)에 빠질 수 있으며, 가독성이나 유지보수 측면에서도 좋지 않은 결과를 초래할 수 있습니다.

이러한 문제를 해결하기 위해 ES8에서 소개된 async/await를 사용하여 애니메이션 처리를 더욱 간편하고 명확하게 할 수 있습니다. async/await는 자바스크립트에서 비동기 코드를 동기적으로 작성할 수 있도록 해주는 문법적 설탕입니다.

예제 코드

다음은 async/await를 사용하여 애니메이션 처리를 구현하는 간단한 예제 코드입니다.

const animate = async () => {
  const element = document.querySelector(".box"); // 애니메이션을 적용할 요소 선택
  
  while (true) {
    await moveElement(element, { left: "500px", top: "200px" }, 1000);
    await moveElement(element, { left: "200px", top: "500px" }, 1000);
    await moveElement(element, { left: "0px", top: "0px" }, 1000);
  }
};

const moveElement = (element, target, duration) => {
  return new Promise(resolve => {
    const start = performance.now();
    const { left: startLeft, top: startTop } = element.style;

    const animateStep = timestamp => {
      const progress = (timestamp - start) / duration;
      const easedProgress = Math.min(progress, 1); // 이징 함수를 사용하여 애니메이션 부드럽게 처리
      
      const left = interpolate(startLeft, target.left, easedProgress);
      const top = interpolate(startTop, target.top, easedProgress);
      
      element.style.left = left;
      element.style.top = top;

      if (progress < 1) {
        requestAnimationFrame(animateStep);
      } else {
        resolve();
      }
    };
    
    requestAnimationFrame(animateStep);
  });
};

const interpolate = (start, end, progress) => {
  const value = (parseFloat(end) - parseFloat(start)) * progress;
  return parseFloat(start) + value + "px";
};

animate();

위의 코드에서 animate() 함수는 요소를 이동하는 애니메이션을 무한 반복합니다. moveElement() 함수는 요소를 주어진 위치로 애니메이션 처리하는 함수입니다. 함수 내에서 requestAnimationFrame()과 Promise를 사용하여 애니메이션을 부드럽게 처리하고, 애니메이션이 완료되면 resolve()를 호출합니다.

결론

자바스크립트의 async/await를 이용하면 애니메이션 처리를 더욱 간단하고 가독성 좋게 작성할 수 있습니다. 비동기 코드와 콜백 지옥을 효과적으로 해결하는 솔루션으로 async/await를 적극 활용해보세요. 이를 통해 웹 애플리케이션의 애니메이션 효과를 더욱 향상시킬 수 있습니다.