Lage en sanntidsklokke med en konisk gradient

Gradienter har vært en del av CSS-spekteret i ganske lang tid nå. Vi ser mange radielle og lineære gradienter i mange prosjekter, men det er én type gradient som ser ut til å være litt ensom: den kjegleformede gradienten. Vi skal lage en urskive ved å bruke denne typen gradient.

Arbeid med koniske gradienter

Det vi lager består av en gradient med fargeoverganger rotert rundt et midtpunkt og kan ha flere fargeverdier. For at denne klokken skal fungere, vil vi også bruke vinkelverdien til en konisk gradient som definerer rotasjonen eller startpunktet. Vinkelen defineres ved å bruke a from verdi.

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

Det som er interessant med dette, er at en startvinkel kan ha en negativ verdi i CSS, noe som vil komme godt med senere.

Et enkelt elegant eksempel på en konisk gradient:

Bygger vår grunnleggende klokke

La oss starte med å legge til litt HTML for klokken og viserne:

La oss lage en standard stil for klokken vår. For at dette skal fungere ordentlig, vil vi oppdatere CSS-variabler med JavaScript senere, så la oss se på disse variablene i vår .clock velger. For enkel justering, la oss legge til fargene på hendene også.

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

Dette setter oss opp med den generelle stylingen vi trenger for klokken. Vi har satt transform-origin på viserne slik at de roterer riktig rundt på klokken. Det er også noen få tilpassede egenskaper der for å angi vinkler på hendene som vi oppdaterer med JavaScript for å få timingen akkurat slik at hver hånd kartlegges til sekunder, minutter og timer tilsvarende.

Her er hva vi har så langt:

Ok, la oss gå videre til å oppdatere de egendefinerte egenskapene!

Legger til JavaScript for vår grunnleggende klokke

Først og fremst skal vi målrette klokken og lage en funksjon:

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

Inne i funksjonen vår skal vi hente gjeldende tid ved å bruke Date() funksjon for å beregne riktig vinkel på hendene:

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;

Slik fungerer denne beregningen:

• sekunder: Vi bruker 60 sekunder og ganger det med 6, som tilfeldigvis er 360, det perfekte antallet vinkler i en hel sirkel.
• Minutter: Samme som sekunder, men nå legger vi til sekundvinkelen og deler den på 60 for å øke vinkelen bare litt i løpet av minuttet for et mer nøyaktig resultat.
• Åpningstider: Først beregner vi resten av timen og deler den på 12. Så deler vi resten med 12 igjen for å få en desimalverdi vi kan gange med 360. For eksempel, når vi er på 23. time, 23 / 12 = remain 11. Del dette med 12 og vi får 0.916 som så blir multiplisert med 360 for en totalsum på 330. Her vil vi gjøre det samme som vi gjorde med minuttene og legge til minuttvinkelen delt på 12, for et mer nøyaktig resultat.

Nå som vi har vinklene våre, er det eneste som gjenstår å oppdatere variablene til klokken vår ved å legge til følgende på slutten av funksjonen vår:

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

Sist, men ikke minst, vil vi utløse funksjonen med et intervall på et sekund for å få en fungerende klokke:

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

Se arbeidsdemoen av vår grunnleggende klokke:

Bruker dette på en konisk gradient

OK, så viserne på klokken vår fungerer. Det vi virkelig ønsker er å kartlegge dem til en konisk gradient som oppdateres når tiden endres. Du har kanskje sett den samme effekten hvis du har en Apple Watch med "Gradient"-ansiktet aktivt:

For å gjøre dette, la oss starte med å oppdatere vår .clock element med en konisk gradient og to egendefinerte egenskaper som kontrollerer start- og sluttvinklene:

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

Du kan leke litt med denne for å style den akkurat slik du liker den. Jeg la til noen ekstra farger i gradienten etter min smak, men så lenge du har et startpunkt og et sluttpunkt, er du klar.

Neste opp vil vi oppdatere vår setDate() funksjon slik at den oppdaterer variablene for våre start- og sluttpunkter på den koniske gradienten. Utgangspunktet vil være sekundviseren vår, som er lett å finne fordi den vil være den samme som vinkelen på minuttene våre. For å få dette til å ende på timeviseren, bør vi gjøre sluttpunktet vårt til det samme som hourAngle variabel i skriptet, men trekk vårt utgangspunkt fra det.

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

Nå kan vi oppdatere variablene våre med JavaScript igjen:

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

Det ser ut til at vi kan være ferdige på dette tidspunktet, men det er en hake! Denne beregningen fungerer fint så lenge minuttviseren har en mindre vinkel enn timeviseren. Vår koniske gradient vil bli rotete i det øyeblikket minuttviseren har beveget seg forbi den. For å fikse dette vil vi bruke en negativ verdi som utgangspunkt. Heldigvis er det lett å få øye på når dette skjer. Før vi oppdaterer variablene våre legger vi til følgende:

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

Ved å trekke fra 360 fra minuttvinkelen vår er vi i stand til å sette en negativ verdi for vår startposition variabel. På grunn av dette negative utgangspunktet bør sluttposisjonen vår oppdateres med timevinkelen, trukket fra startposisjonen.

Det går vi - nå er time- og minuttviserne satt til gradientvinkler:

Det er det! Men ikke la det stoppe deg fra å ta dette enda lenger. Lag dine egne stiler og del dem med meg i kommentarfeltet slik at jeg kan sjekke dem ut.. Her er litt inspirasjon for å komme i gang: