Faire une horloge en temps réel avec un visage dégradé conique

Les dégradés font partie du spectre CSS depuis un certain temps déjà. Nous voyons beaucoup de dégradés radiaux et linéaires dans de nombreux projets, mais il existe un type de dégradé qui semble un peu solitaire : le gradient conique. Nous allons créer un cadran de montre en utilisant ce type de dégradé.

Travailler avec des dégradés coniques

Ce que nous créons consiste en un dégradé avec des transitions de couleur tournées autour d'un point central et peut avoir plusieurs valeurs de couleur. Pour que cette horloge fonctionne, nous utiliserons également la valeur d'angle d'un gradient conique qui définit la rotation ou le point de départ. L'angle est défini à l'aide d'un from valeur.

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

Ce qui est intéressant à ce sujet, c'est qu'un angle de départ peut avoir une valeur négative en CSS, ce qui sera utile plus tard.

Un exemple simple et élégant d'un dégradé conique :

Construire notre horloge de base

Commençons par ajouter du HTML pour l'horloge et les aiguilles :

Créons un style par défaut pour notre horloge. Pour que cela fonctionne correctement, nous mettrons à jour les variables CSS avec JavaScript plus tard, alors étendons ces variables à l'intérieur de notre .clock sélecteur. Pour un réglage facile, ajoutons également les couleurs des mains.

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

Cela nous donne le style général dont nous avons besoin pour l'horloge. Nous avons défini transform-origin sur les aiguilles afin qu'elles tournent correctement autour du cadran de l'horloge. Il existe également quelques propriétés personnalisées pour définir des angles sur les aiguilles que nous mettrons à jour avec JavaScript pour obtenir le bon timing afin que chaque aiguille corresponde aux secondes, minutes et heures en conséquence.

Voici ce que nous avons jusqu'à présent :

Très bien, passons à la mise à jour de ces propriétés personnalisées !

Ajout du JavaScript pour notre horloge de base

Tout d'abord, nous allons cibler notre horloge et créer une fonction :

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

À l'intérieur de notre fonction, nous allons récupérer l'heure actuelle en utilisant le Date() fonction pour calculer l'angle correct des mains:

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;

Voici comment fonctionne ce calcul :

• Secondes: Nous prenons 60 secondes et le multiplions par 6, qui se trouve être 360, le nombre parfait d'angles dans un cercle complet.
• Minutes: Identique aux secondes, mais maintenant nous ajoutons l'angle des secondes et le divisons par 60 pour augmenter l'angle juste un peu dans la minute pour un résultat plus précis.
• Heures: Tout d'abord, nous calculons le reste de l'heure et le divisons par 12. Puis on divise ce reste par 12 encore une fois pour obtenir une valeur décimale, nous pouvons multiplier par 360. Par exemple, lorsque nous sommes à la 23e heure, 23 / 12 = remain 11. Divisez cela par 12 et nous obtenons 0.916 qui est ensuite multiplié par 360 pour un grand total de 330. Ici, nous allons faire la même chose que nous avons fait avec les minutes et ajouter l'angle des minutes, divisé par 12, pour un résultat plus précis.

Maintenant que nous avons nos angles, il ne reste plus qu'à mettre à jour les variables de notre horloge en ajoutant ce qui suit à la fin de notre fonction :

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

Enfin, nous déclencherons la fonction avec un intervalle d'une seconde pour obtenir une horloge de travail :

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

Voir la démo de travail de notre horloge de base :

Appliquer ceci à un dégradé conique

OK, donc les aiguilles de notre horloge fonctionnent. Ce que nous voulons vraiment, c'est les mapper sur un dégradé conique qui se met à jour au fil du temps. Vous avez peut-être constaté le même effet si vous avez une Apple Watch avec le cadran « Dégradé » actif :

Pour cela, commençons par mettre à jour notre .clock élément avec un dégradé conique et deux propriétés personnalisées qui contrôlent les angles de début et de fin :

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

Vous pouvez jouer un peu avec cela pour le styler comme vous l'aimez. J'ai ajouté quelques couleurs supplémentaires dans le dégradé à mon goût, mais tant que vous avez un point de départ et un point d'arrivée, vous êtes prêt à partir.

Ensuite, nous mettrons à jour notre setDate() pour qu'elle mette à jour les variables de nos points de départ et d'arrivée sur le gradient conique. Le point de départ sera notre aiguille des secondes, facile à trouver car elle sera la même que l'angle de nos minutes. Pour que cela se termine à l'aiguille des heures, nous devrions faire en sorte que notre point final soit le même que le hourAngle variable dans le script, mais en soustrayant notre point de départ.

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

Maintenant, nous pouvons à nouveau mettre à jour nos variables avec JavaScript :

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

Il semble que nous pourrions en finir à ce stade, mais il y a un hic ! Ce calcul fonctionne bien tant que l'aiguille des minutes a un angle plus petit que l'aiguille des heures. Notre dégradé conique deviendra désordonné au moment où l'aiguille des minutes le dépassera. Pour résoudre ce problème, nous utiliserons une valeur négative comme point de départ. Heureusement, il est facile de repérer quand cela se produit. Avant de mettre à jour nos variables, nous ajouterons les éléments suivants :

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

En soustrayant 360 de notre angle de minutes, nous sommes en mesure de définir une valeur négative pour notre startposition variable. En raison de ce point de départ négatif, notre position finale doit être mise à jour par l'angle horaire, soustrait de la position de départ.

Et voilà, maintenant les aiguilles des heures et des minutes sont réglées sur des angles dégradés :

C'est ça! Mais ne laissez pas cela vous empêcher d'aller encore plus loin. Créez vos propres styles et partagez-les avec moi dans les commentaires afin que je puisse les vérifier. Voici un peu d'inspiration pour vous aider à démarrer :