Izdelava ure realnega časa s konično prelivno ploskvijo

Gradienti so že nekaj časa del spektra CSS. V mnogih projektih vidimo veliko radialnih in linearnih gradientov, vendar obstaja ena vrsta gradienta, ki se zdi nekoliko osamljena: stožčasti gradient. Z uporabo te vrste gradienta bomo naredili številčnico ure.

Delo s stožčastimi prelivi

To, kar ustvarjamo, je sestavljeno iz preliva z barvnimi prehodi, ki se vrtijo okoli središčne točke in ima lahko več barvnih vrednosti. Da bo ta ura delovala, bomo uporabili tudi vrednost kota stožčastega gradienta, ki določa rotacijo ali začetno točko. Kot je določen z uporabo a from vrednost.

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

Pri tem je zanimivo to, da ima lahko začetni kot v CSS negativno vrednost, kar bo kasneje prišlo prav.

Preprost eleganten primer stožčastega gradienta:

Izdelava naše osnovne ure

Začnimo z dodajanjem nekaj HTML-ja za uro in kazalce:

Ustvarimo privzeti slog za našo uro. Da bo to pravilno delovalo, bomo pozneje posodobili spremenljivke CSS z JavaScriptom, zato poglejmo obseg teh spremenljivk znotraj našega .clock selektor. Za lažje prilagajanje dodajmo še barve rok.

.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 nam postavi splošni stil, ki ga potrebujemo za uro. Postavili smo transform-origin na kazalcih, tako da se pravilno vrtijo okoli številčnice ure. Tam je tudi nekaj lastnosti po meri za nastavitev kotov na kazalcih, ki jih bomo posodobili z JavaScriptom, da bi dobili pravi čas, tako da se vsak kazalec ustrezno preslika v sekunde, minute in ure.

Evo, kaj imamo do sedaj:

V redu, pojdimo na posodabljanje teh lastnosti po meri!

Dodajanje JavaScripta za našo osnovno uro

Najprej bomo ciljali na našo uro in ustvarili funkcijo:

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

Znotraj naše funkcije bomo pridobili trenutni čas z uporabo Date() funkcija za izračun pravilnega kota rok:

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;

Takole deluje ta izračun:

• sekunde: Vzamemo 60 sekund in ga pomnožimo s 6, kar se zgodi 360, popolno število kotov v polnem krogu.
• Zapisnik: Enako kot sekunde, vendar zdaj dodamo sekundni kot in ga delimo s 60 da le malo povečate kot v minuti za natančnejši rezultat.
• Delovni čas: Najprej izračunamo preostanek ure in ga delimo s 12. Nato ta ostanek delimo z 12 znova, da dobimo decimalno vrednost, s katero lahko pomnožimo 360. Na primer, ko smo pri 23. uri, 23 / 12 = remain 11. To delimo z 12 in dobimo 0.916 ki se nato pomnoži s 360 za skupno vsoto 330. Tu bomo naredili isto, kot smo naredili z minutami, in dodali minutni kot, deljen s 12, za natančnejši rezultat.

Zdaj, ko imamo svoje kote, je edina stvar, ki jo moramo narediti, posodobiti spremenljivke naše ure tako, da na koncu naše funkcije dodamo naslednje:

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

Nenazadnje bomo sprožili funkcijo z intervalom sekunde, da dobimo delujočo uro:

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

Oglejte si delujočo predstavitev naše osnovne ure:

Uporaba tega na stožčastem gradientu

OK, torej kazalci naše ure delujejo. Resnično jih želimo preslikati v stožčasti gradient, ki se posodablja, ko se čas spreminja. Morda ste opazili enak učinek, če imate uro Apple Watch z aktivnim obrazom »Gradient«:

Če želite to narediti, začnimo s posodobitvijo našega .clock element s stožčastim gradientom in dvema lastnostma po meri, ki nadzorujeta začetni in končni kot:

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

S tem se lahko malo poigrate in ga oblikujete tako, kot vam je všeč. Dodal sem nekaj dodatnih barv v prelivu po svojih željah, a če imate začetno in končno točko, ste pripravljeni.

Naslednjič bomo posodobili naše setDate() funkcijo, tako da posodobi spremenljivke za naše začetne in končne točke na stožčastem gradientu. Začetna točka bo naš sekundni kazalec, ki ga je enostavno najti, ker bo enak kotu naših minut. Da bi bil ta konec na urnem kazalcu, bi morala biti naša končna točka enaka hourAngle spremenljivko v skriptu, vendar od nje odštejemo naše izhodišče.

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

Zdaj lahko znova posodobimo svoje spremenljivke z JavaScriptom:

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

Videti je, da bi lahko končali na tej točki, vendar obstaja ulov! Ta izračun deluje dobro, dokler ima minutni kazalec manjši kot kot urni kazalec. Naš konični gradient bo postal neurejen v trenutku, ko se bo minutni kazalec premaknil mimo njega. Da bi to popravili, bomo kot izhodišče uporabili negativno vrednost. Na srečo je enostavno opaziti, kdaj se to zgodi. Pred posodobitvijo naših spremenljivk bomo dodali naslednje:

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

Z odštevanjem 360 z našega minutnega kota lahko nastavimo negativno vrednost za naš startposition spremenljivka. Zaradi te negativne začetne točke je treba naš končni položaj posodobiti z urnim kotom, odšteti z začetnim položajem.

Pa gremo - zdaj sta urni in minutni kazalec nastavljena na gradientne kote:

To je to! Vendar naj vas to ne prepreči, da bi to naredili še dlje. Ustvarite svoje lastne sloge in jih delite z menoj v komentarjih, da jih lahko preverim.. Tukaj je malo navdiha, ki vas bo spodbudil: