Reaalajas kella valmistamine koonilise gradiendiga

Gradiendid on olnud osa CSS-i spektrist juba mõnda aega. Paljudes projektides näeme palju radiaalseid ja lineaarseid gradiente, kuid on ühte tüüpi gradiente, mis näivad olevat pisut üksikud: kooniline gradient. Seda tüüpi gradienti kasutades teeme kella sihverplaadi.

Töötamine kooniliste gradientidega

See, mida me teeme, koosneb gradiendist, mille värviüleminekud on pööratud ümber keskpunkti ja millel võib olla mitu värviväärtust. Selle kella toimimiseks kasutame ka koonilise gradiendi nurga väärtust, mis määrab pöörde või alguspunkti. Nurk määratakse kasutades a from väärtus.

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

Selle juures on huvitav see, et lähtenurgal võib CSS-is olla negatiivne väärtus, mis tuleb hiljem kasuks.

Lihtne elegantne näide koonusekujulisest gradiendist:

Meie põhikella ehitamine

Alustame kella ja osutite HTML-i lisamisega:

Loome oma kella jaoks vaikestiili. Selle korrektseks toimimiseks värskendame CSS-i muutujaid hiljem JavaScriptiga, nii et käsitleme neid muutujaid meie .clock valija. Lihtsa näpistamise huvides lisame ka käte värvid.

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

See loob meile kella jaoks vajaliku üldise stiili. Oleme seadnud transform-origin osutitele, et need korralikult ümber kella esikülje pöörleksid. Seal on ka mõned kohandatud atribuudid osutite nurkade määramiseks, mida värskendame JavaScriptiga, et saada õige ajastus, nii et iga osut vastab vastavalt sekunditele, minutitele ja tundidele.

Siin on see, mis meil seni on:

Olgu, jätkame nende kohandatud atribuutide värskendamisega!

JavaScripti lisamine meie põhikella jaoks

Kõigepealt sihime oma kella ja loome funktsiooni:

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

Funktsiooni sees hangime praeguse kellaaja, kasutades Date() funktsioon käte õige nurga arvutamiseks:

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;

See arvutus töötab järgmiselt:

• Sekundid: Võtame 60 sekundit ja korrutame selle 6, mis juhtub olema 360, ideaalne nurkade arv täisringis.
• Protokoll: Sama nagu sekundid, kuid nüüd liidame sekundite nurga ja jagame selle võrra 60 Täpsema tulemuse saamiseks suurendage nurka minuti jooksul veidi.
• Tööaeg: Esiteks arvutame ülejäänud tunni ja jagame selle 12. Seejärel jagame selle jäägi arvuga 12 uuesti, et saada kümnendväärtus, mida saame korrutada 360. Näiteks kui oleme 23. tunnil, 23 / 12 = remain 11. Jagage see 12-ga ja saame 0.916 mis siis korrutatakse 360 kokkuvõttes 330. Siin teeme sama, mida tegime minutitega ja lisame minutite nurga jagatuna 12, täpsema tulemuse saamiseks.

Nüüd, kui meil on oma nurgad, ei jää muud üle, kui värskendada oma kella muutujaid, lisades funktsiooni lõppu järgmise:

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

Viimaseks, kuid mitte vähem tähtsaks, käivitame funktsiooni sekundilise intervalliga, et saada töötav kell:

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

Vaadake meie põhikella töötavat demo:

Selle rakendamine koonilisele gradiendile

OK, nii et meie kella osutid töötavad. Mida me tõesti tahame, on kaardistada need koonilise gradiendiga, mis ajakohastatakse aja muutudes. Võimalik, et olete näinud sama efekti, kui teil on Apple Watch, millel on aktiivne gradient:

Selleks alustame oma .clock koonilise gradiendi ja kahe kohandatud atribuudiga element, mis kontrollivad algus- ja lõppnurki:

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

Saate sellega veidi mängida, et kujundada see just nii, nagu see teile meeldib. Lisasin oma maitse järgi gradienti mõned lisavärvid, kuid nii kaua, kuni teil on algus- ja lõpp-punkt, on teil hea minna.

Järgmisena värskendame oma setDate() funktsiooni, nii et see värskendab meie koonilise gradiendi algus- ja lõpp-punkti muutujaid. Lähtepunktiks on meie sekundiosuti, mida on lihtne leida, kuna see on sama, mis meie minutite nurk. Et see lõppeks tundide osutist, peaksime oma lõpp-punkti muutma samaks, mis on hourAngle muutuja skriptis, kuid lahutage sellest meie lähtepunkt.

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

Nüüd saame oma muutujaid uuesti JavaScriptiga värskendada:

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

Näib, et saame praegu hakkama, kuid siin on konks! See arvutus töötab hästi seni, kuni minutiosuti nurk on väiksem kui tundide osutil. Meie kooniline gradient muutub segaseks hetkel, kui minutiosuti on sellest mööda liikunud. Selle parandamiseks kasutame lähtepunktina negatiivset väärtust. Õnneks on seda lihtne märgata, kui see juhtub. Enne muutujate värskendamist lisame järgmise:

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

Lahutades 360 meie minuti nurga alt suudame oma jaoks määrata negatiivse väärtuse startposition muutuv. Selle negatiivse alguspunkti tõttu tuleks meie lõppasendit värskendada tunninurga võrra, millest lahutatakse alguspositsioon.

Siin me läheme – nüüd on tunni- ja minutiosutajad seatud gradiendi nurga alla:

See on kõik! Kuid ärge laske sellel takistada teid seda veelgi kaugemale võtmast. Looge oma stiile ja jagage neid minuga kommentaarides, et saaksin neid kontrollida. Siin on väike inspiratsioon, mis teid ellu viidaks: