자바스크립트 애니메이션 프레임을 활용한 박스 회전 애니메이션 만들기

18 Oct 2023

javascript

이번 블로그 포스트에서는 자바스크립트의 requestAnimationFrame 메소드를 사용하여 박스 회전 애니메이션을 만드는 방법에 대해 알아보겠습니다.

요구 사항

HTML, CSS, JavaScript에 대한 기본적인 이해
웹 브라우저

스텝별 구현

1. HTML 구조 만들기

먼저, 박스를 나타내는 HTML 구조를 만들어야 합니다. 다음과 같이 HTML을 작성합니다.

<div class="box"></div>

2. CSS 스타일 적용하기

다음으로, 박스의 초기 스타일을 CSS로 적용해야 합니다. 박스를 회전시키기 위해서는 transform 속성을 사용할 것이므로, 다음과 같이 CSS 스타일을 추가합니다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(0deg);
}

3. 자바스크립트 애니메이션 구현하기

이제, 자바스크립트를 사용하여 애니메이션을 구현해보겠습니다. 다음과 같이 자바스크립트 코드를 작성합니다.

const box = document.querySelector('.box');
let rotation = 0;

function animate() {
  rotation += 1;
  box.style.transform = `rotate(${rotation}deg)`;
  requestAnimationFrame(animate);
}

animate();

위 코드에서는 애니메이션을 위한 animate 함수를 작성했습니다. 이 함수는 매 프레임마다 rotation 변수를 증가시키고, 박스의 회전 각도를 업데이트합니다. 그리고 requestAnimationFrame 메소드를 사용하여 다음 프레임을 요청하도록 하였습니다. 이렇게 함으로써 자연스러운 애니메이션 효과를 만들 수 있습니다.

4. 실행하기

마지막으로, 작성한 HTML 파일을 웹 브라우저에서 실행해보면 애니메이션 효과를 확인할 수 있습니다. 박스가 매 프레임마다 회전하게 됩니다.

마무리

이번 포스트에서는 자바스크립트의 requestAnimationFrame 메소드를 활용하여 박스 회전 애니메이션을 만드는 방법에 대해 알아보았습니다. 이를 통해 웹 애플리케이션에 다양한 애니메이션 효과를 추가할 수 있습니다. 애니메이션 구현은 창의력을 발휘하는데, 이번 예제를 통해 여러분도 자신만의 창의적인 애니메이션을 만들어보세요!

더 알아보기

Web Animation API