Realizarea unui ceas în timp real cu o față în grad conic

Gradienții fac parte din spectrul CSS de ceva timp. Vedem o mulțime de gradienți radiali și liniari în multe proiecte, dar există un tip de gradient care pare a fi puțin singuratic: gradientul conic. Vom face un cadran de ceas folosind acest tip de gradient.

Lucrul cu gradienți conici

Ceea ce facem constă într-un gradient cu tranziții de culoare rotite în jurul unui punct central și poate avea mai multe valori de culoare. Pentru ca acest ceas să funcționeze, vom folosi și valoarea unghiului unui gradient conic care definește rotația sau punctul de pornire. Unghiul este definit folosind a from valoare.

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

Ceea ce este interesant este că un unghi de pornire poate avea o valoare negativă în CSS, ceea ce va fi util mai târziu.

Un exemplu simplu și elegant de gradient conic:

Construirea ceasului nostru de bază

Să începem prin a adăuga niște HTML pentru ceas și mâini:

Să creăm un stil implicit pentru ceasul nostru. Pentru ca acest lucru să funcționeze corect, vom actualiza mai târziu variabilele CSS cu JavaScript, așa că haideți să analizăm aceste variabile în interiorul nostru .clock selector. Pentru o ajustare ușoară, să adăugăm și culorile mâinilor.

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

Acest lucru ne stabilește stilul general de care avem nevoie pentru ceas. Am stabilit transform-origin pe mâini, astfel încât acestea să se rotească corect în jurul faței ceasului. Există, de asemenea, câteva proprietăți personalizate acolo pentru a seta unghiurile mâinilor pe care le vom actualiza cu JavaScript pentru a obține sincronizarea corectă, astfel încât fiecare mână să se mapeze la secunde, minute și ore în consecință.

Iată ce avem până acum:

Bine, să trecem la actualizarea acelor proprietăți personalizate!

Adăugarea JavaScript pentru ceasul nostru de bază

În primul rând, vom ținti ceasul nostru și vom crea o funcție:

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

În interiorul funcției noastre, vom prelua ora curentă folosind Date() funcţie pentru a calcula unghiul corect al mâinilor:

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;

Iată cum funcționează acest calcul:

• secunde: Luăm 60 de secunde și le înmulțim cu 6, care se întâmplă să fie 360, numărul perfect de unghiuri dintr-un cerc complet.
• Minute: La fel ca secundele, dar acum adăugăm unghiul secundelor și îl împărțim la 60 pentru a crește unghiul doar puțin într-un minut pentru un rezultat mai precis.
• Ore: Mai întâi, calculăm restul orei și îl împărțim la 12. Apoi împărțim acel rest la 12 din nou pentru a obține o valoare zecimală cu care o putem înmulți 360. De exemplu, când suntem la ora 23, 23 / 12 = remain 11. Împărțiți acest lucru la 12 și obținem 0.916 care apoi se înmulțește cu 360 pentru un total mare de 330. Aici, vom face același lucru pe care l-am făcut cu minutele și vom adăuga unghiul minutelor, împărțit la 12, pentru un rezultat mai precis.

Acum că avem unghiurile noastre, singurul lucru care ne rămâne de făcut este să actualizăm variabilele ceasului nostru adăugând următoarele la sfârșitul funcției noastre:

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

Nu în ultimul rând, vom declanșa funcția cu un interval de o secundă pentru a obține un ceas funcțional:

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

Vedeți demonstrația de lucru a ceasului nostru de bază:

Aplicând acest lucru pe un gradient conic

Bine, deci acționările ceasului nostru funcționează. Ceea ce ne dorim cu adevărat este să le mapăm la un gradient conic care se actualizează pe măsură ce timpul se schimbă. Este posibil să fi observat același efect dacă aveți un Apple Watch cu fața „Gradient” activă:

Pentru a face acest lucru, să începem prin a actualiza .clock element cu un gradient conic și două proprietăți personalizate care controlează unghiurile de început și de sfârșit:

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

Te poți juca puțin cu asta pentru a-l modela așa cum îți place. Am adăugat câteva culori în plus în gradient după placul meu, dar atâta timp cât ai un punct de plecare și un punct de sfârșit, ești gata.

În continuare, vom actualiza setDate() funcția astfel încât să actualizeze variabilele pentru punctele noastre de început și de sfârșit pe gradientul conic. Punctul de pornire va fi mâna noastră a secundelor, care este ușor de găsit pentru că va fi același cu unghiul minutelor noastre. Pentru a face acest sfârșit la mâna orelor, ar trebui să facem punctul nostru de sfârșit același cu cel hourAngle variabilă în script, dar scădem punctul nostru de plecare din el.

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

Acum ne putem actualiza variabilele cu JavaScript din nou:

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

Se pare că am putea termina în acest moment, dar există o captură! Acest calcul funcționează bine atâta timp cât mâna minutelor are un unghi mai mic decât cea a orelor. Gradientul nostru conic va deveni dezordonat în momentul în care mâna minutelor va trece peste el. Pentru a remedia acest lucru, vom folosi o valoare negativă ca punct de plecare. Din fericire, este ușor de observat când se întâmplă acest lucru. Înainte de a actualiza variabilele noastre, vom adăuga următoarele:

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

Prin scădere 360 din punctul nostru de vedere al minutelor, suntem capabili să setăm o valoare negativă pentru startposition variabil. Din cauza acestui punct de plecare negativ, poziția noastră finală ar trebui actualizată cu unghiul orar, scăzut din poziția de pornire.

Iată-ne - acum mâinile orei și minutelor sunt setate la unghiuri de gradient:

Asta e! Dar nu lăsa asta să te împiedice să duci asta și mai departe. Creați-vă propriile stiluri și împărtășiți-le cu mine în comentarii, astfel încât să le pot verifica.. Iată o mică inspirație pentru a vă pune în practică: