자바스크립트로 스포츠 시계 애니메이션 구현하기

18 Oct 2023

javascript

이번 블로그에서는 자바스크립트를 사용하여 스포츠 시계 애니메이션을 구현하는 방법을 소개하겠습니다.

개요

스포츠 시계 애니메이션은 시계의 초침, 분침, 시침이 실제로 움직이는 것처럼 보이는 애니메이션입니다. 이번 예제에서는 HTML, CSS, 자바스크립트를 사용하여 스포츠 시계 애니메이션을 구현해 보겠습니다.

구현 방법

HTML 구조

먼저 HTML 구조를 작성합니다. 시계의 구조를 위해 div 요소와 span 요소를 사용합니다. 각각의 요소에는 고유한 id를 부여하여 자바스크립트에서 접근할 수 있도록 합니다.

<div id="clock">
  <span id="hourHand"></span>
  <span id="minuteHand"></span>
  <span id="secondHand"></span>
</div>

CSS 스타일링

다음으로 CSS를 사용하여 시계의 모양과 애니메이션을 정의합니다. 요소들의 위치와 회전을 조정하여 시계의 손길을 표현합니다.

#clock {
  width: 200px;
  height: 200px;
  position: relative;
}

#hourHand,
#minuteHand,
#secondHand {
  position: absolute;
  width: 2px;
  height: 80px;
  background-color: black;
  transform-origin: bottom center;
  transition: none;
}

#hourHand {
  left: 1px;
  transform: translateY(-10px);
}

#minuteHand {
  left: 1px;
  transform: translateY(-35px);
}

#secondHand {
  left: 1px;
  transform: translateY(-35px);
}

자바스크립트 구현

마지막으로 자바스크립트를 사용하여 시계 애니메이션을 구현합니다. 시계의 초침, 분침, 시침의 회전 각도를 계산하여 업데이트합니다.

function updateClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  const secondHand = document.getElementById('secondHand');
  const minuteHand = document.getElementById('minuteHand');
  const hourHand = document.getElementById('hourHand');

  const secondRotation = (seconds / 60) * 360;
  const minuteRotation = ((minutes * 60 + seconds) / 3600) * 360;
  const hourRotation = ((hours * 3600 + minutes * 60 + seconds) / 43200) * 360;

  secondHand.style.transform = `rotate(${secondRotation}deg)`;
  minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
  hourHand.style.transform = `rotate(${hourRotation}deg)`;
}

setInterval(updateClock, 1000);

실행

위의 코드를 HTML 파일에 복사하고 웹 브라우저에서 실행해 보면, 시계의 초침, 분침, 시침이 실제로 움직이는 애니메이션을 볼 수 있습니다.

마무리

이번에는 자바스크립트를 사용하여 스포츠 시계 애니메이션을 구현하는 방법을 알아보았습니다. 자바스크립트를 이용하면 다양한 시각적인 효과를 구현할 수 있으며, 스포츠 시계 애니메이션 같은 실용적인 예제도 쉽게 만들어볼 수 있습니다. 추가적으로 스타일링이나 자세한 기능을 원한다면 참고 자료를 참조하시기 바랍니다.

참고 자료

#javascript #animation