구슬이 움직이는 애니메이션은 매우 흥미로운 효과를 제공할 수 있습니다. 자바스크립트의 애니메이션 프레임 기능을 활용하여 구슬이 부드럽게 움직이는 애니메이션을 구현해보겠습니다.

HTML 및 CSS 설정

먼저, HTML 파일에 구슬이 움직일 요소를 생성해야 합니다. 다음은 예시입니다.

<div id="bead"></div>

위 코드는 구슬을 표현할 <div> 요소를 생성합니다. 이 요소에 대해 CSS를 적용하여 움직임을 구현해보겠습니다.

#bead {
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

위 CSS 코드는 구슬에 대한 스타일을 지정합니다. 구슬의 크기, 배경색, 위치 등을 설정할 수 있습니다.

자바스크립트 애니메이션 프레임 구현

이제 자바스크립트를 사용하여 구슬이 움직이는 애니메이션을 구현해보겠습니다.

function moveBead() {
  var bead = document.getElementById('bead');
  var position = 0;

  function frame() {
    if (position >= 200) {
      clearInterval(animation);
    } else {
      position += 10;
      bead.style.top = position + 'px';
    }
  }

  var animation = setInterval(frame, 10);
}

moveBead();

위 자바스크립트 코드는 moveBead라는 함수를 정의하고, 구슬을 움직이는 애니메이션을 구현하는 로직을 frame 함수에 작성합니다. frame 함수는 애니메이션을 실행하기 위한 애니메이션 프레임을 설정하는 역할을 합니다.

moveBead 함수에서는 구슬을 선택하고, 초기 위치를 설정합니다. 그리고 frame 함수에서는 일정 간격(10밀리초)으로 구슬의 위치를 변경하고, 변경된 위치를 CSS의 top 속성에 반영합니다.

애니메이션은 clearInterval 함수를 사용하여 일정 거리(200px)까지 이동하면 종료됩니다. 이때 animation 변수에 할당된 애니메이션 프레임을 중지시킵니다.

실행 결과 확인 및 마무리

HTML 파일에서 자바스크립트 코드를 호출하여 구슬이 움직이는 애니메이션을 확인할 수 있습니다. 구슬이 정상적으로 움직이며 일정 거리를 이동한 후에 애니메이션이 종료될 것입니다.

위 방법을 활용하여 움직이는 구슬 애니메이션을 구현할 수 있습니다. 자세한 내용은 MDN을 참조하십시오.

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