Erstellen einer Echtzeituhr mit einem konischen Verlaufsgesicht

Farbverläufe gehören schon seit geraumer Zeit zum CSS-Spektrum. Wir sehen in vielen Projekten viele radiale und lineare Farbverläufe, aber es gibt eine Art von Farbverlauf, die etwas einsam zu sein scheint: der konische Gradient. Wir werden ein Zifferblatt mit dieser Art von Farbverlauf erstellen.

Arbeiten mit konischen Farbverläufen

Was wir machen, besteht aus einem Verlauf mit Farbübergängen, die um einen Mittelpunkt gedreht sind und mehrere Farbwerte haben können. Damit diese Uhr funktioniert, verwenden wir auch den Winkelwert eines konischen Gradienten, der die Rotation oder den Startpunkt definiert. Der Winkel wird mit a definiert from Wert.

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

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

Ein einfaches elegantes Beispiel für einen konischen Farbverlauf:

Aufbau unserer Grunduhr

Beginnen wir damit, etwas HTML für die Uhr und die Zeiger hinzuzufügen:

Lassen Sie uns ein Standard-Styling für unsere Uhr erstellen. Damit dies richtig funktioniert, werden wir CSS-Variablen später mit JavaScript aktualisieren, also lassen Sie uns diese Variablen innerhalb unserer .clock Wähler. Lassen Sie uns zur einfachen Anpassung auch die Farben der Hände hinzufügen.

.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 stellt uns auf das allgemeine Styling ein, das wir für die Uhr benötigen. Wir haben eingestellt transform-origin auf den Zeigern, damit sie sich richtig um das Zifferblatt der Uhr drehen. Es gibt auch ein paar benutzerdefinierte Eigenschaften, um Winkel an den Zeigern festzulegen, die wir mit JavaScript aktualisieren, um das Timing genau richtig zu machen, sodass jeder Zeiger entsprechend Sekunden, Minuten und Stunden zugeordnet wird.

Folgendes haben wir bisher:

In Ordnung, fahren wir mit der Aktualisierung dieser benutzerdefinierten Eigenschaften fort!

Hinzufügen des JavaScripts für unsere Basisuhr

Zuerst werden wir auf unsere Uhr zielen 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 mit dem abrufen Date() Funktion um den richtigen 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 es mit 6, was zufällig ist 360, die perfekte Anzahl von Winkeln in einem vollen Kreis.
• Protokoll: Dasselbe wie Sekunden, aber jetzt addieren wir den Sekundenwinkel und dividieren ihn durch 60 um den Winkel innerhalb einer Minute nur ein wenig zu erhöhen, um ein genaueres Ergebnis zu erzielen.
• Öffnungszeiten: Zuerst berechnen wir den Rest der Stunde und dividieren ihn durch 12. Dann teilen wir diesen Rest durch 12 wieder, um einen Dezimalwert zu erhalten, mit dem wir multiplizieren können 360. Wenn wir zum Beispiel in der 23. Stunde sind, 23 / 12 = remain 11. Teilen Sie dies durch 12 und wir erhalten 0.916 was dann multipliziert wird mit 360 für eine Gesamtsumme von 330. Hier machen wir dasselbe wie mit den Minuten und addieren den Minutenwinkel geteilt durch 12, für ein genaueres Ergebnis.

Jetzt, da wir 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");

Zu guter Letzt lösen wir die Funktion im Sekundentakt aus, um eine funktionierende Uhr zu erhalten:

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

Sehen Sie sich die funktionierende Demo unserer Basisuhr an:

Wenden Sie dies auf einen konischen Gradienten an

OK, die Zeiger unserer Uhr funktionieren also. Was wir wirklich wollen, ist, sie einem konischen Farbverlauf zuzuordnen, der sich mit der Zeit ändert. Sie haben möglicherweise den gleichen Effekt gesehen, wenn Sie eine Apple Watch mit aktivem „Gradient“-Zifferblatt haben:

Beginnen wir dazu mit der Aktualisierung unserer .clock Element mit einem konischen Farbverlauf und zwei benutzerdefinierten Eigenschaften, die den 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 herumspielen, um es so zu stylen, wie Sie es mögen. Ich habe dem Farbverlauf einige zusätzliche Farben nach meinem Geschmack hinzugefügt, aber solange Sie einen Start- und einen Endpunkt haben, können Sie loslegen.

Als nächstes werden wir unsere aktualisieren setDate() Funktion so, dass sie die Variablen für unsere Start- und Endpunkte auf dem konischen Gradienten aktualisiert. Der Ausgangspunkt ist unser Sekundenzeiger, der leicht zu finden ist, da er mit dem Winkel unserer Minuten übereinstimmt. Damit dies am Stundenzeiger endet, sollten wir unseren Endpunkt auf den gleichen setzen wie den hourAngle Variable im Skript, aber subtrahieren Sie unseren Startpunkt davon.

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

Jetzt können wir unsere Variablen wieder mit JavaScript aktualisieren:

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

Es sieht so aus, als könnten wir an dieser Stelle fertig sein, aber es gibt einen Haken! Diese Berechnung funktioniert gut, solange der Minutenzeiger einen kleineren Winkel als der Stundenzeiger hat. Unser konischer Verlauf wird in dem Moment unordentlich, wenn der Minutenzeiger daran vorbeigezogen ist. Um dies zu beheben, verwenden wir einen negativen Wert als Ausgangspunkt. Glücklicherweise ist es leicht zu erkennen, wann dies passiert. Bevor wir unsere Variablen aktualisieren, fügen wir Folgendes hinzu:

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

Durch Subtrahieren 360 Aus unserer Minutenperspektive können wir einen negativen Wert für unsere festlegen startposition Variable. Aufgrund dieses negativen Startpunkts sollte unsere Endposition um den Stundenwinkel aktualisiert werden, subtrahiert von der Startposition.

Los geht's – jetzt sind die Stunden- und Minutenzeiger auf Steigungswinkel eingestellt:

Das ist es! Aber lassen Sie sich davon nicht davon abhalten, noch weiter zu gehen. Erstellen Sie Ihre eigenen Stile und teilen Sie sie mir in den Kommentaren mit, damit ich sie ausprobieren kann. Hier ist eine kleine Inspiration, um Sie in Schwung zu bringen: