[JavaScript30] 2. Clock | setInterval(), transform, transition

📃 요구사항

현재 시간에 맞게 시계를 동작시킨다.
이 때, 바늘의 한 쪽 끝은 가운데에 고정되어 시계 방향으로 움직여야 한다.

✨ 결과화면

💻 소스코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JS + CSS Clock</title>
  </head>
  <body>
    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>

    <style>
      html {
        background: #018ded url(https://unsplash.it/1500/1000?image=881&blur=5);
        background-size: cover;
        font-family: "helvetica neue";
        text-align: center;
        font-size: 10px;
      }

      body {
        margin: 0;
        font-size: 2rem;
        display: flex;
        flex: 1;
        min-height: 100vh;
        align-items: center;
      }

      .clock {
        width: 30rem;
        height: 30rem;
        border: 20px solid white;
        border-radius: 50%;
        margin: 50px auto;
        position: relative;
        padding: 2rem;
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
          inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
      }

      .clock-face {
        position: relative;
        width: 100%;
        height: 100%;
        transform: translateY(-3px);
        /* account for the height of the clock hands */
      }

      .hand {
        width: 50%;
        height: 6px;
        background: black;
        position: absolute;
        top: 50%;
        transform-origin: 100%;
        transform: rotate(90deg);
        transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
      }

      .hour-hand {
        background: #ff8080;
      }

      .min-hand {
        background: #ffff80;
      }

      .second-hand {
        background: #d9d9d9;
      }
    </style>

    <script>
      const hourHand = document.querySelector(".hour-hand");
      const minuteHand = document.querySelector(".min-hand");
      const secondHand = document.querySelector(".second-hand");

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

        const hoursDegrees = (hours / 12) * 360 + 90;
        const minutesDegrees = (minutes / 60) * 360 + 90;
        const secondsDegrees = (seconds / 60) * 360 + 90;

        hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
        minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
        secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

        console.log(hours);
      }

      setInterval(setDate, 1000);
    </script>
  </body>
</html>

📖 TIL

setInterval()

setInterval()은 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행하는 함수이다.

setInterval(() => {
	console.log('Hello');
}, 3000);

위와 같이 작성하면, 3초에 한 번씩 Hello가 콘솔에 찍히게 된다. 참고로 지정하는 함수는 꼭 익명일 필요는 없고, 함수에 이름을 부여하거나 다른 곳에서 함수를 정의하고 참조(reference)를 전달할 수도 있다. 또, 필요한 매개변수를 전달할 수도 있다.

function print(string) {
	console.log(`Hello ${string}!`);
}

setInterval(print, 1000, "World");

만약 지정된 시간이 경과되었을 때 특정 코드블록을 한 번만 실행하고 싶다면 setTimeout()을 사용하면 된다. setTimeout()의 사용법은 setInterval()과 동일하다.

transform

CSS의 속성 중 하나로, 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 수 있다. transform은 요소의 변형을 일으킬 뿐 움직이는 동적인 효과를 줄 수 없다. transform 속성을 사용해서 효과를 주고, transition 속성을 사용해서 동적인 효과를 제어한다.

1️⃣ transform

transform function	설명	단위
translate(x, y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. translateX(n), translateY(n)을 통해 X축 또는 Y축으로만 이동시킬 수 있다.	px, %, em 등
scale(x, y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소시킨다. scaleX(n), scaleY(n)을 통해 X축 또는 Y축으로만 확대 또는 축소시킬 수 있다.	0과 양수
skew(x-angle, y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다(비튼다). skewX(n), skewY(n)을 통해 X축 또는 Y축으로만 기울일(비틀) 수 있다.	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/- 각도(deg)

2️⃣ transform-origin

transform-origin 속성은 transform 속성과 함께 사용되는 속성으로, 회전 중심(원점, 기준점)을 지정한다. transform-origin을 사용하면 rotate(), skew() 등의 회전, 변형 속성을 사용하기 전에 기준점을 지정할 수 있다. 초기 값은 50% 50%으로 해당 요소의 중심점이 된다. transform-origin의 속성 값은 백분율(%)과 키워드 중 하나로 지정할 수 있다.

백분율(%)	대용 가능한 키워드
0%	left
0%	top
50%	center
100%	right
100%	bottom

위의 표에 따라, transform-origin: 0% 0%, transform-origin: 100% 50% 등으로 나타낼 수 있다. Clock 소스코드에서는, 바늘의 한쪽 끝을 bottom right에 맞추기 위해 다음과 같이 작성하였다.

transform-origin: 100%;

transition

transition은 CSS 속성을 변경할 때 애니메이션 속도를 조절하여 애니메이션 효과가 일정 시간에 걸쳐 다양한 방법으로 진행되게끔 한다.

프로퍼티	설명	기본값
transition-property	대상이 되는 CSS 프로퍼티를 지정한다. 지정하지 않는 경우에는 모든 프로퍼티가 트랜지션의 대상이 된다. 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다. 단, 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다. (ex. display)	all
transition-duration	지속시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다.	0s
transition-timing-function	효과를 위한 수치 함수를 지정한다. 큐빅 베이지어(cubic-bezier)를 정의하는 네 점에 의해 정의된다. 미리 정해둔 5개의 키워드가 제공된다. ◾ ease: 천천히 시작해서, 빠르게 진행되고, 천천히 끝난다. ◾ linear: 처음과 끝이 같은 속도로 진행된다. ◾ ease-in: 천천히 시작한다. ◾ ease-out: 천천히 끝난다. ◾ ease-in-out: 천천히 시작해서 천천히 끝난다.	ease
transition-delay	변화한 시점과 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 즉, 프로퍼티의 값이 변화해도 일정 시간 대기한 후 트랜지션이 실행되도록 한다.	0s
transition	모든 트랜지션 프로퍼티를 한번에 지정한다. transition: property duration function delay

.div1 {
	transition: width 1s ease-in 1s;
}

.div2 {
	transition-property: width, opacity;
    transition-duration: 2s, 1s;
} /* width는 2초, opacity는 4초의 duration을 갖는다. */

.div2 {
	transition: width 2s, opacity 4s;
} /* transition 프로퍼티로 축약 표현이 가능하다. */

.div3 {
	transition-property: width, opacity, left, top;
    transition-duration: 2s, 1s;
} /* width는 2초, opacity는 1초, left는 2초, top은 1초의 duration */

Clock 소스코드에서는, transition-timing-function을 cubic-bezier를 이용해서 시계 바늘에 애니메이션을 주었다.

transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

👀 참고

youtube Wes Bos

https://www.youtube.com/watch?v=xu87YWbr4X0&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=2

https://poiemaweb.com/css3-transform

https://www.tabmode.com/homepage/transform-origin.html

https://poiemaweb.com/css3-transition

'language > javascript' 카테고리의 다른 글

[JavaScript30] 4. Array Cardio Practice (1) (0)	2021.12.09
[JavaScript30] 3. CSS Variables \| CSS 변수, setProperty() (0)	2021.12.06
[JavaScript30] 1. Drum Kit \| data-*, audio, transitionend (0)	2021.12.04
자바스크립트 기초 4. 클래스 \| 클래스 예제와 콜백 함수 최종 정리 (0)	2021.12.02
자바스크립트 기초 3. 연산자 \| boolean의 모든것 && 연산자 (0)	2021.12.02