Tworzenie zegara czasu rzeczywistego ze stożkową twarzą gradientową

Gradienty są częścią spektrum CSS już od dłuższego czasu. Widzimy wiele gradientów radialnych i liniowych w wielu projektach, ale jest jeden rodzaj gradientu, który wydaje się być trochę samotny: stożkowy gradient. Zrobimy tarczę zegarka używając tego rodzaju gradientu.

Praca z gradientami stożkowymi

To, co tworzymy, składa się z gradientu z przejściami kolorów obróconymi wokół punktu środkowego i może mieć wiele wartości kolorów. Aby ten zegar działał, użyjemy również wartości kąta gradientu stożkowego, który określa obrót lub punkt początkowy. Kąt jest określony za pomocą a from wartość.

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

Co ciekawe, kąt początkowy może mieć w CSS wartość ujemną, co przyda się później.

Prosty elegancki przykład gradientu stożkowego:

Budowanie naszego podstawowego zegara

Zacznijmy od dodania kodu HTML dla zegara i wskazówek:

Stwórzmy domyślną stylizację naszego zegara. Aby to działało poprawnie, zaktualizujemy później zmienne CSS za pomocą JavaScript, więc ograniczmy te zmienne do naszego .clock selektor. Dla łatwego dostrojenia dodajmy również kolory rąk.

.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));
}

To ustawia nas w ogólnej stylizacji, której potrzebujemy do zegara. Ustawiliśmy transform-origin na dłoniach, aby prawidłowo obracały się wokół tarczy zegara. Istnieje również kilka niestandardowych właściwości do ustawiania kątów wskazówek, które zaktualizujemy za pomocą JavaScript, aby uzyskać odpowiedni czas, tak aby każda wskazówka była odpowiednio odwzorowywana na sekundy, minuty i godziny.

Oto, co mamy do tej pory:

W porządku, przejdźmy do aktualizacji tych właściwości niestandardowych!

Dodanie JavaScript do naszego podstawowego zegara

Po pierwsze, wycelujemy w nasz zegar i stworzymy funkcję:

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

Wewnątrz naszej funkcji będziemy pobierać aktualny czas za pomocą Date() funkcjonować aby obliczyć prawidłowy kąt rąk:

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;

Oto jak działa to obliczenie:

• Sekundy: Bierzemy 60 sekund i mnożymy przez 6, który akurat jest 360, idealna liczba kątów w pełnym okręgu.
• Minuty: To samo co sekundy, ale teraz dodajemy kąt sekund i dzielimy go przez 60 aby zwiększyć kąt tylko trochę w ciągu minuty, aby uzyskać dokładniejszy wynik.
• Godziny pracy: Najpierw obliczamy pozostałą część godziny i dzielimy ją przez 12. Następnie dzielimy tę resztę przez 12 ponownie, aby uzyskać wartość dziesiętną, którą możemy pomnożyć przez 360. Na przykład, gdy jesteśmy w 23. godzinie, 23 / 12 = remain 11. Podziel to przez 12 i otrzymamy 0.916 która następnie jest mnożona przez 360 na sumę 330. Tutaj zrobimy to samo, co zrobiliśmy z minutami i dodamy kąt minut, podzielony przez 12, aby uzyskać dokładniejszy wynik.

Teraz, gdy mamy już nasze kąty, jedyne, co pozostało do zrobienia, to zaktualizować zmienne naszego zegara, dodając na końcu naszej funkcji:

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

Na koniec uruchomimy funkcję z interwałem sekundy, aby uzyskać działający zegar:

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

Zobacz działające demo naszego podstawowego zegara:

Stosując to do gradientu stożkowego

OK, więc wskazówki naszego zegara działają. To, czego naprawdę chcemy, to zmapowanie ich do stożkowego gradientu, który aktualizuje się wraz ze zmianą czasu. Możesz zobaczyć ten sam efekt, jeśli masz zegarek Apple Watch z aktywną twarzą „Gradient”:

Aby to zrobić, zacznijmy od aktualizacji naszego .clock element z gradientem stożkowym i dwiema niestandardowymi właściwościami, które kontrolują kąt początkowy i końcowy:

.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)
  );
}

Możesz się z tym trochę pobawić, aby stylizować go tak, jak lubisz. Dodałem kilka dodatkowych kolorów w gradiencie według moich upodobań, ale dopóki masz punkt początkowy i punkt końcowy, możesz iść.

Następnie zaktualizujemy nasze setDate() tak, że aktualizuje zmienne dla naszych punktów początkowych i końcowych na gradiencie stożkowym. Punktem wyjścia będzie nasza wskazówka sekundnika, którą łatwo znaleźć, ponieważ będzie ona równa kątowi naszych minut. Aby zakończyć się na wskazówce godzin, powinniśmy ustawić nasz punkt końcowy taki sam jak hourAngle w skrypcie, ale odejmij od niej nasz punkt początkowy.

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

Teraz możemy ponownie zaktualizować nasze zmienne za pomocą JavaScript:

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

Wygląda na to, że w tym momencie możemy już skończyć, ale jest pewien haczyk! To obliczenie działa dobrze, o ile wskazówka minutowa ma mniejszy kąt niż wskazówka godzinowa. Nasz stożkowy gradient zrobi się bałagan w momencie, gdy wskazówka minut przejdzie obok niego. Aby to naprawić, użyjemy wartości ujemnej jako punktu wyjścia. Na szczęście łatwo to zauważyć. Przed aktualizacją naszych zmiennych dodamy:

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

Odejmując 360 z naszego kąta minut jesteśmy w stanie ustawić ujemną wartość dla naszego startposition zmienny. Z powodu tego ujemnego punktu początkowego, nasza pozycja końcowa powinna zostać zaktualizowana o kąt godzinny, odjęty przez pozycję początkową.

No to zaczynamy — teraz wskazówki godzinowe i minutowe ustawione są pod kątem nachylenia:

Otóż ​​to! Ale nie pozwól, by powstrzymało cię to przed posunięciem się dalej. Twórz własne style i dziel się nimi ze mną w komentarzach, abym mógł je sprawdzić. Oto mała inspiracja, która pomoże Ci zacząć: