제퍼넷 로고

원뿔형 그라디언트 면으로 실시간 시계 만들기

시간

그라디언트는 꽤 오랫동안 CSS 스펙트럼의 일부였습니다. 많은 프로젝트에서 방사형 및 선형 그라디언트를 많이 볼 수 있지만 약간 외로워 보이는 그라디언트 유형이 한 가지 있습니다. 원뿔형 그라디언트. 이 유형의 그라디언트를 사용하여 시계 모드를 만들 것입니다.

원뿔형 그라디언트로 작업하기

우리가 만들고 있는 것은 중심점을 중심으로 회전된 색상 전환이 있는 그라디언트로 구성되며 여러 색상 값을 가질 수 있습니다. 이 시계가 작동하려면 회전 또는 시작점을 정의하는 원추형 기울기의 각도 값도 사용합니다. 각도는 다음을 사용하여 정의됩니다. from 값.

background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);

이것에 대해 흥미로운 점은 CSS에서 시작 각도가 음수 값을 가질 수 있다는 것입니다. 이는 나중에 유용할 것입니다.

원뿔형 그라디언트의 간단하고 우아한 예:

기본 시계 만들기

시계와 바늘에 HTML을 추가하는 것으로 시작하겠습니다.

시계의 기본 스타일을 만들어 보겠습니다. 이것이 제대로 작동하려면 나중에 JavaScript로 CSS 변수를 업데이트할 것이므로 이러한 변수의 범위를 .clock 선택자. 쉽게 조정할 수 있도록 손의 색상도 추가해 보겠습니다.

.clock {
  /* general clock vars */
  --hour-hand-color: #000;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #000;
  --minute-hand-degrees: 0deg;
  --second-hand-color: hotpink;
  --second-hand-degrees: 0deg;

  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  border: 7px solid #000;
}

/* clock hands */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 45%;
  width: 4px;
  margin-left: -2px;
  background: var(--second-hand-color);
  border-radius: 6px;
  transform-origin: bottom center;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.second-hand {
  transform: rotate(var(--second-hand-degrees));
}
.hour-hand {
  height: 35%;
  border-radius: 40px;
  background-color: var(--hour-hand-color);
  transform: rotate(var(--hour-hand-degrees));
}
.minute-hand {
  height: 50%;
  background: var(--minute-hand-color);
  transform: rotate(var(--minute-hand-degrees));
}

이것은 우리가 시계에 필요한 일반적인 스타일을 설정합니다. 우리는 설정했습니다 transform-origin 시계의 앞면을 중심으로 제대로 회전하도록 손에. 손에 각도를 설정하는 몇 가지 사용자 정의 속성도 있습니다. JavaScript로 업데이트하여 각 바늘이 그에 따라 초, 분, 시간에 매핑되도록 타이밍을 바로잡을 것입니다.

지금까지 얻은 정보는 다음과 같습니다.

자, 이제 해당 사용자 정의 속성을 업데이트해 보겠습니다.

기본 시계에 JavaScript 추가

먼저 시계를 대상으로 하고 함수를 만들 것입니다.

const clock = document.getElementById("clock");
function setDate() {
  // Code to set the current time and hand angles.
}
setDate();

함수 내부에서 다음을 사용하여 현재 시간을 가져올 것입니다. Date() 기능 손의 정확한 각도를 계산하려면:

const now = new Date();
const secondsAngle = now.getSeconds() * 6; 
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;

이 계산이 작동하는 방식은 다음과 같습니다.

  • 초: 우리는 60초를 가지고 그것을 곱합니다. 6, 그것은 360, 완전한 원에 있는 각의 완전한 수.
  • 의사록: 초와 동일하지만 이제 초 각도를 추가하고 다음으로 나눕니다. 60 더 정확한 결과를 얻으려면 XNUMX분 안에 각도를 약간만 높이십시오.
  • 시간 : 먼저 남은 시간을 계산하고 다음으로 나눕니다. 12. 그런 다음 나머지를 다음으로 나눕니다. 12 다시 곱할 수 있는 십진수 값을 얻으려면 360. 예를 들어, 우리가 23시에 있을 때, 23 / 12 = remain 11. 이것을 12로 나누면 0.916 그러면 다음이 곱해집니다. 360 총 총액 330. 여기에서 분으로 했던 것과 동일한 작업을 수행하고 분 각도를 추가합니다. 12, 더 정확한 결과를 위해.

이제 각도가 생겼으므로 함수 끝에 다음을 추가하여 시계의 변수를 업데이트하는 일만 남았습니다.

clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");

마지막으로 작동하는 시계를 얻기 위해 XNUMX초 간격으로 함수를 트리거합니다.

const clock = document.getElementById("clock");
function setDate() {
  // etc.
}
// Tick tick tick
setInterval(setDate, 1000);
setDate();

기본 시계의 작동 데모를 참조하십시오.

이것을 원뿔형 그라디언트에 적용

자, 시계 바늘이 작동하고 있습니다. 우리가 정말로 원하는 것은 시간이 변경됨에 따라 업데이트되는 원추형 그래디언트에 매핑하는 것입니다. "그라디언트"면이 활성화된 Apple Watch가 있는 경우 동일한 효과를 보았을 수 있습니다.

신용 : 맥 월드

이렇게 하려면 먼저 .clock 원뿔형 그라디언트와 시작 및 끝 각도를 제어하는 ​​두 개의 사용자 정의 속성이 있는 요소:

.clock {
  /* same as before */

  /* conic gradient vars */
  --start: 0deg;
  --end: 0deg;

  /* same as before */

  background: 
    conic-gradient(
      from var(--start),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.5) var(--end),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.7)
  );
}

이것으로 약간의 플레이를 하여 원하는 대로 스타일을 지정할 수 있습니다. 내 취향에 따라 그라디언트에 몇 가지 추가 색상을 추가했지만 시작점과 끝점이 있으면 계속 사용할 수 있습니다.

다음으로 우리는 우리의 setDate() 함수를 사용하여 원추 기울기의 시작점과 끝점에 대한 변수를 업데이트합니다. 시작점은 초침이 될 것이며 이는 분의 각도와 같을 것이기 때문에 찾기 쉽습니다. 시침에 이것을 끝내기 위해 우리는 우리의 끝점을 다음과 같아야 합니다. hourAngle 스크립트에서 변수를 사용하지만 여기서 시작점을 뺍니다.

let startPosition = minsAngle;
let endPosition = hourAngle - minsAngle;

이제 JavaScript로 변수를 다시 업데이트할 수 있습니다.

clock.style.setProperty("--start", startPosition + "deg");
clock.style.setProperty("--end", endPosition + "deg");

이 시점에서 완료할 수 있는 것처럼 보이지만 문제가 있습니다! 이 계산은 분침이 시침보다 작은 각도를 가지고 있는 한 잘 작동합니다. 분침이 지나치는 순간 원뿔형 그라디언트가 지저분해집니다. 이 문제를 해결하기 위해 음수 값을 시작점으로 사용합니다. 운 좋게도 이런 일이 발생하면 쉽게 알아차릴 수 있습니다. 변수를 업데이트하기 전에 다음을 추가합니다.

if (minsAngle > hourAngle) {
  startPosition = minsAngle - 360;
  endPosition = hourAngle - startPosition;
}

빼서 360 분 각도에서 음수 값을 설정할 수 있습니다. startposition 변하기 쉬운. 이 음수 시작점 때문에 끝 위치는 시작 위치를 뺀 시간 각도만큼 업데이트되어야 합니다.

이제 시침과 분침이 그라데이션 각도로 설정되었습니다.

그게 다야! 그러나 이것이 당신이 이것을 더 이상 진행하지 못하도록 막지 마십시오. 나만의 스타일을 만들고 내가 확인할 수 있도록 댓글로 공유해 주세요. 다음은 여러분을 이끌어줄 작은 영감입니다.

spot_img

최신 인텔리전스

spot_img