Colin's Blog
Promise를 활용한 애니메이션 기능 구현

애니메이션은 웹 개발에서 자주 사용되는 기능 중 하나입니다. 이번 포스트에서는 Promise를 활용하여 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Promise란?

Promise는 비동기 작업의 최종 결과를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다:

Promise를 사용하면 비동기 작업의 성공 또는 실패에 따라 다른 동작을 수행할 수 있습니다.

애니메이션 구현 예시

애니메이션을 구현하기 위해 Promise와 setTimeout 함수를 사용해 보겠습니다. 아래는 간단한 예시 코드입니다.

function animate(element, distance, duration) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();
    let start = element.offsetLeft; // 시작 위치

    function step() {
      const elapsedTime = Date.now() - startTime;
      if (elapsedTime >= duration) {
        element.style.left = start + distance + "px";
        resolve(); // Promise를 이행(resolve)
      } else {
        const progress = (elapsedTime / duration) * distance;
        element.style.left = start + progress + "px";
        requestAnimationFrame(step);
      }
    }

    requestAnimationFrame(step);
  });
}

// 애니메이션을 실행할 요소 선택
const box = document.getElementById("box");

// 애니메이션 실행
animate(box, 200, 1000)
  .then(() => {
    // 애니메이션 성공 시 실행할 동작
    console.log("애니메이션 완료!");
  })
  .catch(() => {
    // 애니메이션 실패 시 실행할 동작
    console.error("애니메이션 에러!");
  });

위의 코드는 animate 함수를 정의하고, 이 함수를 호출하여 애니메이션을 실행하는 예시입니다. animate 함수는 요소(element), 이동 거리(distance), 애니메이션 지속 시간(duration)을 인자로 받습니다.

animate 함수는 Promise를 반환하고, 내부에서 비동기 작업이 진행됩니다. Promise는 애니메이션 이행(resolve) 또는 실패(reject)에 따라 결과를 반환하게 됩니다.

애니메이션 완료 후에는 then 메소드를 사용하여 성공 시 동작을 수행하고, 애니메이션 실패 시 catch 메소드를 사용하여 에러 처리를 할 수 있습니다.

마무리

Promise를 활용하여 애니메이션을 구현하는 방법에 대해 알아보았습니다. Promise는 비동기 작업을 처리할 때 매우 유용한 도구입니다. 이를 활용하여 웹 애니메이션을 더욱 섬세하게 제어할 수 있습니다. 애니메이션을 구현할 때에는 Promise의 상태 변화에 따라 적절한 동작을 수행하는 것이 중요합니다.

포스트의 내용이 유용하고 도움이 되었다면 #Promise #Animation 해시태그를 사용하여 공유해주세요!

© 2018 Colin. All rights reserved.