자바스크립트로 애니메이션 프레임 만들기

18 Oct 2023

javascript

애니메이션은 웹 개발자들이 웹 페이지나 앱에 생동감과 인터랙티브한 요소를 추가하는 데 도움이 됩니다. 자바스크립트를 사용하여 애니메이션 프레임을 만들어보겠습니다. 이를 통해 웹 요소를 움직이거나 변화시킬 수 있습니다.

requestAnimationFrame 사용하기

자바스크립트의 requestAnimationFrame 메서드를 사용하여 애니메이션 프레임을 만들 수 있습니다. requestAnimationFrame은 브라우저에게 다음 애니메이션 프레임을 그리기 전에 콜백 함수를 실행하도록 요청합니다.

function animate() {
  // 애니메이션 프레임을 그리는 로직 작성
  
  // 다음 애니메이션 프레임을 요청
  requestAnimationFrame(animate);
}

// 애니메이션 시작
animate();

animate 함수는 애니메이션 프레임을 그리기 위한 로직을 작성하는 곳입니다. 애니메이션을 그리기 위해 만든 함수 내에서 원하는 움직임이나 스타일 변경을 구현할 수 있습니다. 그리고 마지막으로 requestAnimationFrame을 사용하여 다음 애니메이션 프레임을 요청합니다. 이를 반복하여 애니메이션을 만들어냅니다.

예제

다음은 애니메이션 프레임을 사용하여 웹 요소를 움직이는 간단한 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

<div id="box"></div>

<script>
  // 요소 선택
  const box = document.getElementById('box');

  let positionX = 0;
  let speed = 2;
  
  function animate() {
    // 위치 변경
    positionX += speed;
    
    // 요소에 새로운 위치 적용
    box.style.left = positionX + 'px';
    
    // 경계에 닿았을 때 방향 변경
    if (positionX >= window.innerWidth - box.offsetWidth || positionX <= 0) {
      speed *= -1;
    }

    // 다음 애니메이션 프레임 요청
    requestAnimationFrame(animate);
  }
  
  // 애니메이션 시작
  animate();
</script>

</body>
</html>

위 예제 코드는 box라는 ID를 가진 요소를 선택하고, 그 요소의 위치를 애니메이션 프레임마다 2px씩 이동시키는 기능을 구현합니다. 요소가 화면의 경계에 닿으면 방향을 반대로 바꿉니다.

결론

이처럼 자바스크립트를 사용하여 애니메이션 프레임을 만들 수 있으며, 이를 활용하여 웹 요소를 다양한 방식으로 움직이거나 스타일을 변경할 수 있습니다. requestAnimationFrame을 이용하면 성능이 향상되고 부드러운 애니메이션을 만들 수 있으니, 많은 웹 개발자들이 이를 활용하고 있습니다.

#자바스크립트 #애니메이션