Eine Echtzeituhr mit einem konischen Farbverlauf-Zifferblatt

Farbverläufe gibt es in der CSS-Welt schon seit geraumer Zeit. Wir sehen viele radiale und lineare Farbverläufe in Projekten, aber es gibt einen Typ von Farbverlauf, der etwas einsam zu sein scheint: den konischen Farbverlauf. Wir werden ein Zifferblatt mit dieser Art von Farbverlauf erstellen.

Arbeiten mit konischen Farbverläufen

Was wir erstellen, besteht aus einem Farbverlauf mit Farbübergängen, die sich um einen Mittelpunkt drehen und mehrere Farbwerte haben können. Damit diese Uhr funktioniert, werden wir auch den Winkelwert eines konischen Farbverlaufs verwenden, der die Drehung oder den Startpunkt definiert. Der Winkel wird durch die Verwendung eines from-Wertes definiert.

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

Interessant daran ist, dass ein Startwinkel in CSS einen negativen Wert haben kann, was später nützlich sein wird.

Ein einfaches, elegantes Beispiel für einen konischen Farbverlauf

Aufbau unserer grundlegenden Uhr

Beginnen wir mit dem Hinzufügen von HTML für die Uhr und die Zeiger

Lass uns ein paar Standardstile für unsere Uhr erstellen. Damit dies richtig funktioniert, werden wir die CSS-Variablen später mit JavaScript aktualisieren, also begrenzen wir diese Variablen innerhalb unseres .clock-Selectors. Zur einfachen Anpassung fügen wir auch die Farben der Zeiger hinzu.

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

Dies gibt uns die allgemeinen Stile, die wir für die Uhr benötigen. Wir haben transform-origin auf den Zeigern gesetzt, damit sie sich korrekt um das Zifferblatt der Uhr drehen. Es gibt auch ein paar benutzerdefinierte Eigenschaften dort, um Winkel auf den Zeigern zu setzen, die wir mit JavaScript aktualisieren werden, um die Zeit genau richtig einzustellen, sodass jeder Zeiger Sekunden, Minuten und Stunden entsprechend abbildet.

Hier ist, was wir bisher haben:

Okay, machen wir weiter mit der Aktualisierung dieser benutzerdefinierten Eigenschaften!

Hinzufügen von JavaScript für unsere grundlegende Uhr

Zuerst werden wir unsere Uhr ansprechen und eine Funktion erstellen

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

Innerhalb unserer Funktion werden wir die aktuelle Zeit mithilfe der Date() Funktion abrufen, um den korrekten Winkel der Zeiger zu berechnen

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;

So funktioniert diese Berechnung

• Sekunden: Wir nehmen 60 Sekunden und multiplizieren sie mit 6, was 360 ergibt, die perfekte Anzahl von Winkeln in einem vollen Kreis.
• Minuten: Wie bei den Sekunden, aber jetzt addieren wir den Sekundenwinkel und teilen ihn durch 60, um den Winkel innerhalb der Minute für ein genaueres Ergebnis etwas zu erhöhen.
• Stunden: Zuerst berechnen wir den Rest der Stunde und teilen ihn durch 12. Dann teilen wir diesen Rest erneut durch 12, um einen Dezimalwert zu erhalten, den wir mit 360 multiplizieren können. Wenn wir zum Beispiel die 23. Stunde haben, ist 23 / 12 = Rest 11. Teilen Sie dies durch 12, und wir erhalten 0,916, das dann mit 360 multipliziert wird, was insgesamt 330 ergibt. Hier machen wir dasselbe wie bei den Minuten und addieren den Minutenwinkel, geteilt durch 12, für ein genaueres Ergebnis.

Nachdem wir nun unsere Winkel haben, müssen wir nur noch die Variablen unserer Uhr aktualisieren, indem wir am Ende unserer Funktion Folgendes hinzufügen

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

Zuletzt, aber nicht zuletzt, lösen wir die Funktion mit einem Intervall von einer Sekunde aus, um eine funktionierende Uhr zu erhalten

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

Sehen Sie die funktionierende Demo unserer grundlegenden Uhr

Anwendung auf einen konischen Farbverlauf

Okay, die Zeiger unserer Uhr funktionieren. Was wir wirklich wollen, ist, sie auf einen konischen Farbverlauf abzubilden, der sich mit der Zeit ändert. Sie haben vielleicht den gleichen Effekt gesehen, wenn Sie eine Apple Watch mit dem aktiven Zifferblatt „Gradient“ haben

Um dies zu erreichen, beginnen wir damit, unser .clock-Element mit einem konischen Farbverlauf und zwei benutzerdefinierten Eigenschaften zu aktualisieren, die die Start- und Endwinkel steuern

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

Sie können damit ein wenig experimentieren, um es so zu gestalten, wie Sie es möchten. Ich habe einige zusätzliche Farben in den Farbverlauf nach meinem Geschmack eingefügt, aber solange Sie einen Start- und einen Endpunkt haben, sind Sie bestens gerüstet.

Als nächstes aktualisieren wir unsere setDate()-Funktion, sodass sie die Variablen für unsere Start- und Endpunkte des konischen Farbverlaufs aktualisiert. Der Startpunkt wird unser Sekundenzeiger sein, der leicht zu finden ist, da er mit dem Winkel unserer Minuten übereinstimmt. Um dies am Stundenzeiger enden zu lassen, sollten wir unseren Endpunkt mit der hourAngle-Variable im Skript gleichsetzen, aber unseren Startpunkt davon abziehen.

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

Jetzt können wir unsere Variablen erneut mit JavaScript aktualisieren

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

Es sieht so aus, als wären wir an diesem Punkt fertig, aber es gibt einen Haken! Diese Berechnung funktioniert einwandfrei, solange der Minutenzeiger einen kleineren Winkel als der Stundenzeiger hat. Unser konischer Farbverlauf wird unordentlich, sobald der Minutenzeiger darüber hinausgegangen ist. Um dies zu beheben, verwenden wir einen negativen Wert als Startpunkt. Glücklicherweise ist es leicht zu erkennen, wann dies geschieht. Bevor wir unsere Variablen aktualisieren, fügen wir Folgendes hinzu

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

Indem wir 360 von unserem Minutenwinkel subtrahieren, können wir einen negativen Wert für unsere startposition-Variable festlegen. Aufgrund dieses negativen Startpunkts sollte unsere Endposition mit dem Stundenwinkel aktualisiert werden, abzüglich der Startposition.

Da haben wir es – jetzt sind die Stunden- und Minutenzeiger auf Farbverlaufswinkel eingestellt

Das war's! Aber lassen Sie sich davon nicht davon abhalten, dies noch weiter auszubauen. Erstellen Sie Ihre eigenen Stile und teilen Sie sie mir in den Kommentaren mit, damit ich sie mir ansehen kann. Hier ist ein wenig Inspiration, um Ihnen den Einstieg zu erleichtern