Hacer un reloj en tiempo real con una cara de gradiente cónico

Los gradientes han sido parte del espectro CSS desde hace bastante tiempo. Vemos muchos degradados radiales y lineales en muchos proyectos, pero hay un tipo de degradado que parece un poco solitario: el gradiente cónico. Vamos a hacer una esfera de reloj usando este tipo de degradado.

Trabajar con gradientes cónicos

Lo que estamos haciendo consiste en un degradado con transiciones de color giradas alrededor de un punto central y puede tener varios valores de color. Para que este reloj funcione, también usaremos el valor del ángulo de un gradiente cónico que define la rotación o el punto de inicio. El ángulo se define usando un from .

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

Lo interesante de esto es que un ángulo inicial puede tener un valor negativo en CSS, lo que será útil más adelante.

Un ejemplo simple y elegante de un degradado cónico:

Construyendo nuestro reloj básico

Comencemos agregando algo de HTML para el reloj y las manecillas:

Vamos a crear un estilo predeterminado para nuestro reloj. Para que esto funcione correctamente, actualizaremos las variables CSS con JavaScript más adelante, así que analicemos estas variables dentro de nuestro .clock selector. Para facilitar los ajustes, agreguemos también los colores de las manos.

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

Esto nos prepara con el estilo general que necesitamos para el reloj. hemos establecido transform-origin en las manecillas para que giren correctamente alrededor de la esfera del reloj. También hay algunas propiedades personalizadas para establecer ángulos en las manecillas que actualizaremos con JavaScript para obtener el tiempo justo para que cada manecilla se asigne a segundos, minutos y horas en consecuencia.

Esto es lo que tenemos hasta ahora:

Muy bien, pasemos a actualizar esas propiedades personalizadas.

Agregando el JavaScript para nuestro reloj básico

En primer lugar, apuntaremos a nuestro reloj y crearemos una función:

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

Dentro de nuestra función vamos a buscar la hora actual usando el Date() función para calcular el ángulo correcto de las manos:

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;

Así es como funciona este cálculo:

• Segundos: Tomamos 60 segundos y lo multiplicamos por 6, que resulta ser 360, el número perfecto de ángulos en un círculo completo.
• Minutos: Igual que los segundos, pero ahora sumamos el ángulo de los segundos y lo dividimos por 60 para aumentar el ángulo solo un poco dentro de un minuto para obtener un resultado más preciso.
• Horario: Primero, calculamos el resto de la hora y lo dividimos por 12. Luego dividimos ese resto por 12 de nuevo para obtener un valor decimal podemos multiplicar por 360. Por ejemplo, cuando estamos en la hora 23, 23 / 12 = remain 11. Divida esto por 12 y obtenemos 0.916 que luego se multiplica por 360 por un gran total de 330. Aquí, haremos lo mismo que hicimos con los minutos y sumaremos el ángulo de los minutos, dividido por 12, para obtener un resultado más preciso.

Ahora que tenemos nuestros ángulos, lo único que queda por hacer es actualizar las variables de nuestro reloj agregando lo siguiente al final de nuestra función:

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

Por último, pero no menos importante, activaremos la función con un intervalo de un segundo para que el reloj funcione:

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

Vea la demostración de trabajo de nuestro reloj básico:

Aplicando esto a un degradado cónico.

Bien, entonces las manecillas de nuestro reloj están funcionando. Lo que realmente queremos es asignarlos a un gradiente cónico que se actualice a medida que cambia el tiempo. Es posible que hayas visto el mismo efecto si tienes un Apple Watch con la cara "Gradiente" activa:

Para hacer esto, comencemos actualizando nuestro .clock elemento con un degradado cónico y dos propiedades personalizadas que controlan los ángulos inicial y final:

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

Puedes jugar un poco con esto para diseñarlo de la manera que te gusta. Agregué algunos colores adicionales en el degradado a mi gusto, pero siempre que tenga un punto de inicio y un punto final, está listo para continuar.

A continuación, actualizaremos nuestro setDate() para que actualice las variables de nuestros puntos inicial y final en el gradiente cónico. El punto de partida será nuestro segundero, que es fácil de encontrar porque será el mismo que el ángulo de nuestros minutos. Para que esto termine en la manecilla de las horas, debemos hacer que nuestro punto final sea el mismo que el hourAngle variable en el script, pero reste nuestro punto de partida de él.

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

Ahora podemos actualizar nuestras variables con JavaScript nuevamente:

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

Parece que podríamos terminar en este punto, ¡pero hay una trampa! Este cálculo funciona bien siempre que la manecilla de los minutos tenga un ángulo más pequeño que la manecilla de las horas. Nuestro gradiente cónico se desordenará en el momento en que la manecilla de los minutos haya pasado. Para arreglar esto, usaremos un valor negativo como punto de partida. Afortunadamente, es fácil detectar cuando esto sucede. Antes de actualizar nuestras variables agregaremos lo siguiente:

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

restando 360 desde nuestro ángulo de minutos, podemos establecer un valor negativo para nuestro startposition variable. Debido a este punto de inicio negativo, nuestra posición final debe actualizarse por el ángulo horario, restado por la posición inicial.

Ahí vamos, ahora las manecillas de hora y minutos están configuradas en ángulos degradados:

¡Eso es todo! Pero no dejes que eso te impida llevar esto aún más lejos. Crea tus propios estilos y compártelos conmigo en los comentarios para que pueda verlos. Aquí hay un poco de inspiración para que te pongas en marcha: