자바스크립트로 비행하는 애니메이션 만들기

18 Oct 2023

javascript

이번 포스트에서는 자바스크립트를 이용하여 비행하는 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정하기

먼저 HTML 파일에 애니메이션에 필요한 요소를 추가해야 합니다. 비행하는 요소에는 보통 이미지나 아이콘이 사용되며, 화면 상에 움직이는 효과를 주기 위해 div 요소를 사용할 것입니다.

<div class="flight-animation">
  <img src="airplane.png" alt="Airplane">
</div>

2. CSS 스타일 적용하기

애니메이션에 적용할 CSS 스타일을 설정합니다. 비행하는 애니메이션이므로 position: absolute; 속성을 사용하여 요소를 절대 위치로 설정하고, top과 left 속성을 사용하여 초기 위치를 지정합니다.

.flight-animation {
  position: absolute;
  top: 0;
  left: 0;
}

3. 자바스크립트 코드 작성하기

이제 애니메이션을 동작시킬 자바스크립트 코드를 작성해보겠습니다. 먼저 애니메이션을 실행시킬 요소를 변수로 저장합니다.

const flightElement = document.querySelector('.flight-animation');

다음으로, 요소에 애니메이션을 적용하기 위해 requestAnimationFrame 함수를 사용하여 애니메이션을 반복 실행합니다. 각 프레임마다 요소의 위치를 조정하여 움직이는 효과를 줄 수 있습니다.

function animate() {
  // 요소의 현재 위치 정보 가져오기
  const currentTop = parseFloat(flightElement.style.top);
  
  // 위치 조정
  flightElement.style.top = currentTop + 1 + 'px';
  
  // 다음 프레임에 애니메이션 실행
  requestAnimationFrame(animate);
}

// 애니메이션 실행
animate();

위의 코드에서 animate 함수는 각 프레임마다 호출되며, 요소의 위치를 1픽셀씩 아래로 내려주는 역할을 합니다. requestAnimationFrame 함수를 사용하여 다음 프레임에 animate 함수를 호출하도록 설정하여 애니메이션을 반복 실행합니다.

4. 브라우저에서 애니메이션 확인하기

이제 작성한 코드를 브라우저에서 실행하여 애니메이션을 확인해보세요. 요소가 위에서 아래로 움직이는 비행 효과를 확인할 수 있을 것입니다.

마무리

이번 포스트에서는 자바스크립트를 사용하여 비행하는 애니메이션을 만드는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현할 수 있으니 창의적인 아이디어를 발휘해보세요!

참고 자료:

MDN Web Docs - requestAnimationFrame()