Een realtime klok maken met een kegelvormig verloop

Gradiënten maken al geruime tijd deel uit van het CSS-spectrum. We zien veel radiale en lineaire gradiënten in veel projecten, maar er is één type gradiënt dat een beetje eenzaam lijkt: de conische gradiënt. We gaan een wijzerplaat maken met dit type verloop.

Werken met kegelvormige verlopen

Wat we maken bestaat uit een verloop met kleurovergangen die rond een middelpunt zijn gedraaid en die meerdere kleurwaarden kunnen hebben. Om deze klok te laten werken, gebruiken we ook de hoekwaarde van een conische gradiënt die de rotatie of het startpunt definieert. De hoek wordt gedefinieerd met a from waarde.

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

Wat hier interessant aan is, is dat een starthoek een negatieve waarde kan hebben in CSS, wat later van pas zal komen.

Een eenvoudig elegant voorbeeld van een conisch verloop:

Onze basisklok bouwen

Laten we beginnen met wat HTML toe te voegen voor de klok en de wijzers:

Laten we een standaardstijl voor onze klok maken. Om dit goed te laten werken, zullen we de CSS-variabelen later bijwerken met JavaScript, dus laten we deze variabelen binnen onze .clock kiezer. Laten we voor eenvoudige aanpassingen ook de kleuren van de wijzers toevoegen.

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

Dit geeft ons de algemene styling die we nodig hebben voor de klok. We zijn klaar transform-origin op de wijzers zodat ze goed rond de klok draaien. Er zijn ook een paar aangepaste eigenschappen om hoeken voor de wijzers in te stellen die we zullen updaten met JavaScript om de timing precies goed te krijgen, zodat elke wijzer overeenkomstig seconden, minuten en uren wordt toegewezen.

Dit is wat we tot nu toe hebben:

Oké, laten we verder gaan met het bijwerken van die aangepaste eigenschappen!

Het JavaScript voor onze basisklok toevoegen

Ten eerste gaan we onze klok richten en een functie maken:

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

Binnen onze functie gaan we de huidige tijd ophalen met behulp van de Date() functie om de juiste hoek van de handen te berekenen:

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;

Zo werkt deze berekening:

• seconden: We nemen 60 seconden en vermenigvuldigen het met 6, wat toevallig is 360, het perfecte aantal hoeken in een volledige cirkel.
• Notulen: Hetzelfde als seconden, maar nu voegen we de secondenhoek toe en delen deze door 60 om de hoek binnen de minuut een klein beetje te vergroten voor een nauwkeuriger resultaat.
• Uur: Eerst berekenen we de rest van het uur en delen dit door 12. Dan delen we die rest door 12 nogmaals om een ​​decimale waarde te krijgen die we kunnen vermenigvuldigen met 360. Als we bijvoorbeeld op het 23e uur zijn, 23 / 12 = remain 11. Deel dit door 12 en we krijgen 0.916 die vervolgens wordt vermenigvuldigd met 360 voor een totaal van 330. Hier zullen we hetzelfde doen als met de minuten en de minutenhoek toevoegen, gedeeld door 12, voor een nauwkeuriger resultaat.

Nu we onze hoeken hebben, hoeven we alleen nog de variabelen van onze klok bij te werken door het volgende toe te voegen aan het einde van onze functie:

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

Last but not least zullen we de functie activeren met een interval van een seconde om een ​​werkende klok te krijgen:

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

Bekijk de werkende demo van onze basisklok:

Dit toepassen op een conisch verloop

OK, dus de wijzers van onze klok werken. Wat we echt willen, is ze toewijzen aan een conische gradiënt die wordt bijgewerkt naarmate de tijd verandert. Je hebt misschien hetzelfde effect gezien als je een Apple Watch hebt met het gezicht "Gradient" actief:

Om dit te doen, laten we beginnen met het updaten van onze .clock element met een kegelvormig verloop en twee aangepaste eigenschappen die de begin- en eindhoek bepalen:

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

Je kunt hier een beetje mee spelen om het te stylen zoals jij het wilt. Ik heb naar mijn smaak wat extra kleuren in het verloop toegevoegd, maar zolang je een begin- en een eindpunt hebt, zit je goed.

Vervolgens updaten we onze setDate() functie zodat het de variabelen voor onze begin- en eindpunten op de kegelvormige gradiënt bijwerkt. Het startpunt is onze secondewijzer, die gemakkelijk te vinden is omdat deze hetzelfde is als de hoek van onze minuten. Om dit te laten eindigen bij de urenwijzer, moeten we ons eindpunt hetzelfde maken als de hourAngle variabele in het script, maar trek ons ​​startpunt ervan af.

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

Nu kunnen we onze variabelen opnieuw bijwerken met JavaScript:

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

Het lijkt erop dat we op dit punt klaar kunnen zijn, maar er is een addertje onder het gras! Deze berekening werkt prima zolang de minutenwijzer een kleinere hoek heeft dan de urenwijzer. Onze conische gradiënt wordt rommelig op het moment dat de minutenwijzer er voorbij is gelopen. Om dit op te lossen, gebruiken we een negatieve waarde als uitgangspunt. Gelukkig is het gemakkelijk te herkennen wanneer dit gebeurt. Voordat we onze variabelen bijwerken, voegen we het volgende toe:

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

door af te trekken 360 vanuit onze minutenhoek kunnen we een negatieve waarde instellen voor onze startposition variabel. Vanwege dit negatieve startpunt moet onze eindpositie worden bijgewerkt met de uurhoek, afgetrokken van de startpositie.

Daar gaan we - nu zijn de uren- en minutenwijzers ingesteld op hellingshoeken:

Dat is het! Maar laat dat je er niet van weerhouden om nog verder te gaan. Maak je eigen stijlen en deel ze met mij in de reacties, zodat ik ze kan bekijken. Hier is een beetje inspiratie om je op weg te helpen: