Fremstilling af et realtidsur med en kegleformet gradientflade

Gradienter har været en del af CSS-spektret i et stykke tid nu. Vi ser mange radiale og lineære gradienter i mange projekter, men der er én type gradient, der ser ud til at være lidt ensom: den kegleformede gradient. Vi skal lave en urskive ved hjælp af denne type gradient.

Arbejde med koniske gradienter

Det, vi laver, består af en gradient med farveovergange roteret omkring et midtpunkt og kan have flere farveværdier. For at dette ur skal fungere, vil vi også bruge vinkelværdien af ​​en kegleformet gradient, som definerer rotationen eller udgangspunktet. Vinklen defineres ved at bruge a from værdi.

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

Det interessante ved dette er, at en startvinkel kan have en negativ værdi i CSS, hvilket vil være nyttigt senere.

Et simpelt elegant eksempel på en konisk gradient:

Opbygning af vores grundlæggende ur

Lad os starte med at tilføje noget HTML til uret og viserne:

Lad os skabe noget standardstyling til vores ur. For at dette skal fungere korrekt, opdaterer vi CSS-variabler med JavaScript senere, så lad os undersøge disse variabler i vores .clock vælger. For nem tilpasning, lad os også tilføje farverne på hænderne.

.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 sætter os op med den generelle styling, vi har brug for til uret. Vi har sat transform-origin på viserne, så de rigtigt drejer rundt på uret. Der er også et par brugerdefinerede egenskaber derinde til at indstille vinkler på viserne, som vi opdaterer med JavaScript for at få timingen helt rigtig, så hver hånd kortlægges til sekunder, minutter og timer i overensstemmelse hermed.

Her er hvad vi har indtil videre:

Okay, lad os gå videre til at opdatere disse brugerdefinerede egenskaber!

Tilføjelse af JavaScript til vores grundlæggende ur

Først og fremmest vil vi målrette vores ur og oprette en funktion:

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

Inde i vores funktion vil vi hente den aktuelle tid ved hjælp af Date() funktion for at beregne den korrekte vinkel på hænderne:

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;

Sådan fungerer denne beregning:

• sekunder: Vi tager 60 sekunder og gange det med 6, hvilket tilfældigvis er 360, det perfekte antal vinkler i en hel cirkel.
• minutter: Samme som sekunder, men nu tilføjer vi sekundvinklen og dividerer den med 60 for at øge vinklen en lille smule inden for et minut for et mere præcist resultat.
• Åbningstider: Først beregner vi resten af ​​timen og dividerer den med 12. Så dividerer vi resten med 12 igen for at få en decimalværdi, vi kan gange med 360. For eksempel, når vi er ved den 23. time, 23 / 12 = remain 11. Divider dette med 12 og vi får 0.916 som så bliver ganget med 360 for i alt 330. Her vil vi gøre det samme, som vi gjorde med minutterne og tilføje minutvinklen divideret med 12, for et mere præcist resultat.

Nu hvor vi har vores vinkler, er det eneste tilbage at gøre at opdatere variablerne for vores ur ved at tilføje følgende i slutningen af ​​vores funktion:

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

Sidst, men ikke mindst, vil vi udløse funktionen med et interval på et sekund for at få et fungerende ur:

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

Se arbejdsdemoen af ​​vores grundlæggende ur:

Anvendelse af dette på en konisk gradient

OK, så viserne på vores ur virker. Det, vi virkelig ønsker, er at kortlægge dem til en konisk gradient, der opdateres efterhånden som tiden ændrer sig. Du har muligvis set den samme effekt, hvis du har et Apple Watch med "Gradient"-ansigtet aktivt:

For at gøre dette, lad os starte med at opdatere vores .clock element med en konisk gradient og to brugerdefinerede egenskaber, der styrer start- og slutvinklerne:

.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 lege lidt med dette for at style det lige som du kan lide det. Jeg tilføjede nogle ekstra farver i gradienten efter min smag, men så længe du har et startpunkt og et slutpunkt, er du god til at gå.

Næste op vil vi opdatere vores setDate() funktion, så den opdaterer variablerne for vores start- og slutpunkter på den koniske gradient. Udgangspunktet vil være vores sekundviser, som er let at finde, fordi den vil være den samme som vinklen på vores minutter. For at få dette til at ende på timeviseren bør vi gøre vores slutpunkt til det samme som hourAngle variabel i scriptet, men træk vores udgangspunkt fra det.

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

Nu kan vi opdatere vores variabler med JavaScript igen:

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

Det ser ud til, at vi kunne være færdige på dette tidspunkt, men der er en fangst! Denne beregning fungerer fint, så længe minutviseren har en mindre vinkel end timeviseren. Vores koniske gradient bliver rodet i det øjeblik, hvor minutviseren har bevæget sig forbi den. For at rette op på dette vil vi bruge en negativ værdi som udgangspunkt. Heldigvis er det nemt at få øje på, hvornår dette sker. Før vi opdaterer vores variabler, tilføjer vi følgende:

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

Ved at trække fra 360 fra vores minutvinkel er vi i stand til at sætte en negativ værdi for vores startposition variabel. På grund af dette negative udgangspunkt bør vores slutposition opdateres med timevinklen, fratrukket af startpositionen.

Så går vi - nu er time- og minutviserne indstillet til gradientvinkler:

Det er det! Men lad det ikke forhindre dig i at tage dette endnu længere. Lav dine egne styles og del dem med mig i kommentarerne, så jeg kan tjekke dem ud.. Her er lidt inspiration til at komme i gang: