Δημιουργία ρολογιού σε πραγματικό χρόνο με κωνική όψη κλίσης

Οι διαβαθμίσεις αποτελούν μέρος του φάσματος CSS εδώ και αρκετό καιρό. Βλέπουμε πολλές ακτινικές και γραμμικές διαβαθμίσεις σε πολλά έργα, αλλά υπάρχει ένας τύπος κλίσης που φαίνεται να είναι λίγο μοναχικός: η κωνική κλίση. Θα φτιάξουμε μια όψη ρολογιού χρησιμοποιώντας αυτόν τον τύπο κλίσης.

Εργασία με κωνικές κλίσεις

Αυτό που φτιάχνουμε αποτελείται από μια διαβάθμιση με χρωματικές μεταβάσεις που περιστρέφονται γύρω από ένα κεντρικό σημείο και μπορεί να έχει πολλαπλές τιμές χρώματος. Για να λειτουργήσει αυτό το ρολόι, θα χρησιμοποιήσουμε επίσης την τιμή γωνίας μιας κωνικής κλίσης που ορίζει την περιστροφή ή το σημείο εκκίνησης. Η γωνία ορίζεται χρησιμοποιώντας το α from αξία.

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

Αυτό που είναι ενδιαφέρον σε αυτό, είναι ότι μια γωνία εκκίνησης μπορεί να έχει αρνητική τιμή στο CSS, η οποία θα είναι χρήσιμη αργότερα.

Ένα απλό κομψό παράδειγμα κωνικής κλίσης:

Χτίζοντας το βασικό μας ρολόι

Ας ξεκινήσουμε προσθέτοντας λίγο HTML για το ρολόι και τους δείκτες:

Ας δημιουργήσουμε κάποιο προεπιλεγμένο στυλ για το ρολόι μας. Για να λειτουργήσει σωστά, θα ενημερώσουμε αργότερα τις μεταβλητές CSS με JavaScript, οπότε ας βάλουμε αυτές τις μεταβλητές στο εσωτερικό μας .clock εκλέκτορας. Για εύκολη προσαρμογή, ας προσθέσουμε και τα χρώματα των χεριών.

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

Αυτό μας φτιάχνει το γενικό στυλ που χρειαζόμαστε για το ρολόι. Έχουμε ορίσει transform-origin στους δείκτες ώστε να περιστρέφονται σωστά γύρω από το ρολόι. Υπάρχουν επίσης μερικές προσαρμοσμένες ιδιότητες εκεί για να ορίσουμε γωνίες στα χέρια, τις οποίες θα ενημερώσουμε με JavaScript για να έχουμε τον σωστό χρόνο, ώστε κάθε χέρι να αντιστοιχίζεται σε δευτερόλεπτα, λεπτά και ώρες ανάλογα.

Να τι έχουμε μέχρι στιγμής:

Εντάξει, ας προχωρήσουμε στην ενημέρωση αυτών των προσαρμοσμένων ιδιοτήτων!

Προσθήκη του JavaScript για το βασικό μας ρολόι

Αρχικά, θα στοχεύσουμε το ρολόι μας και θα δημιουργήσουμε μια συνάρτηση:

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

Μέσα στη λειτουργία μας θα φέρουμε την τρέχουσα ώρα χρησιμοποιώντας το Date() λειτουργία για να υπολογίσετε τη σωστή γωνία των χεριών:

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;

Δείτε πώς λειτουργεί αυτός ο υπολογισμός:

• Δευτερόλεπτα: Παίρνουμε 60 δευτερόλεπτα και τα πολλαπλασιάζουμε επί 6, που συμβαίνει να είναι 360, ο τέλειος αριθμός γωνιών σε έναν πλήρη κύκλο.
• Λεπτά: Το ίδιο με τα δευτερόλεπτα, αλλά τώρα προσθέτουμε τη γωνία δευτερολέπτων και τη διαιρούμε με 60 για να αυξήσετε λίγο τη γωνία μέσα στο λεπτό για πιο ακριβές αποτέλεσμα.
• Ώρες λειτουργίας: Αρχικά, υπολογίζουμε το υπόλοιπο της ώρας και το διαιρούμε με 12. Στη συνέχεια διαιρούμε αυτό το υπόλοιπο με 12 και πάλι για να πάρουμε μια δεκαδική τιμή μπορούμε να πολλαπλασιάσουμε με 360. Για παράδειγμα, όταν είμαστε στην 23η ώρα, 23 / 12 = remain 11. Διαιρέστε το με το 12 και παίρνουμε 0.916 το οποίο στη συνέχεια πολλαπλασιάζεται επί 360 για ένα μεγάλο σύνολο 330. Εδώ, θα κάνουμε το ίδιο που κάναμε με τα λεπτά και θα προσθέσουμε τη γωνία λεπτών, διαιρούμενη με 12, για πιο ακριβές αποτέλεσμα.

Τώρα που έχουμε τις γωνίες μας, το μόνο που μένει να κάνουμε είναι να ενημερώσουμε τις μεταβλητές του ρολογιού μας προσθέτοντας τα ακόλουθα στο τέλος της συνάρτησής μας:

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

Τελευταίο, αλλά όχι λιγότερο σημαντικό, θα ενεργοποιήσουμε τη λειτουργία με ένα διάστημα ενός δευτερολέπτου για να λάβουμε ένα ρολόι εργασίας:

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

Δείτε το λειτουργικό demo του βασικού μας ρολογιού:

Εφαρμόζοντας αυτό σε μια κωνική κλίση

Εντάξει, οι δείκτες του ρολογιού μας δουλεύουν. Αυτό που πραγματικά θέλουμε είναι να τα αντιστοιχίσουμε σε μια κωνική κλίση που ενημερώνεται καθώς αλλάζει η ώρα. Μπορεί να έχετε δει το ίδιο αποτέλεσμα εάν έχετε ένα Apple Watch με το πρόσωπο "Gradient" ενεργό:

Για να το κάνουμε αυτό, ας ξεκινήσουμε με την ενημέρωση μας .clock στοιχείο με κωνική κλίση και δύο προσαρμοσμένες ιδιότητες που ελέγχουν τις γωνίες έναρξης και τέλους:

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

Μπορείτε να παίξετε λίγο με αυτό για να το διαμορφώσετε όπως σας αρέσει. Πρόσθεσα μερικά επιπλέον χρώματα στο ντεγκραντέ κατά τις προτιμήσεις μου, αλλά εφόσον έχετε ένα σημείο εκκίνησης και ένα σημείο λήξης, είστε έτοιμοι.

Στη συνέχεια, θα ενημερώσουμε το δικό μας setDate() λειτουργεί έτσι ώστε να ενημερώνει τις μεταβλητές για τα σημεία έναρξης και λήξης στην κωνική κλίση. Το σημείο εκκίνησης θα είναι ο δείκτης του δευτερολέπτου μας, ο οποίος είναι εύκολο να βρεθεί γιατί θα είναι ίδια με τη γωνία των λεπτών μας. Για να φτάσουμε αυτό το τέλος στο δείκτη ωρών, θα πρέπει να κάνουμε το σημείο λήξης μας ίδιο με το hourAngle μεταβλητή στο σενάριο, αλλά αφαιρέστε το σημείο εκκίνησης από αυτό.

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

Τώρα μπορούμε να ενημερώσουμε ξανά τις μεταβλητές μας με JavaScript:

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

Φαίνεται ότι θα μπορούσαμε να τελειώσουμε σε αυτό το σημείο, αλλά υπάρχει μια αλιεία! Αυτός ο υπολογισμός λειτουργεί καλά, εφόσον ο δείκτης των λεπτών έχει μικρότερη γωνία από τον δείκτη των ωρών. Η κωνική κλίση μας θα γίνει ακατάστατη τη στιγμή που ο δείκτης των λεπτών θα περάσει πέρα ​​από αυτήν. Για να το διορθώσουμε, θα χρησιμοποιήσουμε μια αρνητική τιμή ως σημείο εκκίνησης. Ευτυχώς, είναι εύκολο να εντοπιστεί πότε συμβαίνει αυτό. Πριν ενημερώσουμε τις μεταβλητές μας, θα προσθέσουμε τα εξής:

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

Με αφαίρεση 360 από τη γωνία των λεπτών μας, είμαστε σε θέση να ορίσουμε μια αρνητική τιμή για το δικό μας startposition μεταβλητός. Εξαιτίας αυτού του αρνητικού σημείου εκκίνησης, η τελική μας θέση θα πρέπει να ενημερωθεί κατά τη γωνία ώρας, αφαιρούμενη από τη θέση εκκίνησης.

Εδώ πάμε — τώρα οι δείκτες της ώρας και των λεπτών έχουν ρυθμιστεί σε γωνίες κλίσης:

Αυτό είναι! Αλλά μην αφήσετε αυτό να σας εμποδίσει να το προχωρήσετε ακόμη περισσότερο. Δημιουργήστε τα δικά σας στυλ και μοιραστείτε τα μαζί μου στα σχόλια για να τα τσεκάρω.. Εδώ είναι μια μικρή έμπνευση για να σας βοηθήσω: