Cree un reloj en tiempo real con una cara degradada cónica | trucos CSS

Los degradados han sido parte del espectro CSS durante bastante tiempo. Vemos muchos degradados radiales y lineales en muchos proyectos, pero hay un tipo de degradado que parece un poco solitario: el degradado cónico. Voy a hacer un dial usando este tipo de degradado.

Trabajar con degradados 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 gradiente del cono, que define la rotación o el punto de inicio. El ángulo se determina usando un from valor.

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

Lo interesante de esto es que el ángulo de inicio 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 principal

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

Vamos a crear un estilo predeterminado para nuestro reloj. Para que funcione correctamente, actualizaremos las variables CSS con JavaScript más adelante, así que envolvamos esas variables en nuestro .clock Para facilitar la personalización, 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 da el estilo general que necesitamos para el reloj. transform-origin en las manecillas para que giren correctamente alrededor de la esfera del reloj. También hay algunas propiedades personalizadas allí para establecer los ángulos de las manecillas, que actualizaremos con JavaScript para obtener la hora correcta de modo que cada manecilla se asigne a segundos, minutos y horas respectivamente.

Esto es lo que tenemos hasta ahora:

Bien, ¡vamos a actualizar esas propiedades personalizadas!

Agregando JavaScript para nuestro reloj principal

Primero, apuntaremos 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, recuperaremos 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 los multiplicamos por 6que pasa a ser 360el número ideal de ángulos en un círculo completo.
  • Minutos: Igual que los segundos, pero ahora sumamos el segundo ángulo y lo dividimos por 60 para aumentar el ángulo solo un poco en un minuto para obtener un resultado más preciso.
  • En punto: Primero calculamos el resto de la hora y lo dividimos por 12Luego dividimos este resto por 12 de nuevo para obtener un valor decimal que podamos multiplicar por 360Por ejemplo, cuando estamos en la hora 23, 23 / 12 = remain 11Dividimos esto por 12 y obtenemos 0.916 que luego se multiplica por 360 total 330Aquí vamos a hacer lo mismo que hicimos con los minutos y sumamos el ángulo de los minutos dividido por 12para 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 segundo intervalo para que el reloj funcione:

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

Vea una demostración funcional de nuestro reloj principal:

Aplicando esto a un gradiente 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 una carátula "Gradiente" activa:

crédito: macworld

Para hacer esto, comencemos actualizando el 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 darle la forma que más te guste. Agregué algunos colores adicionales en el degradado para mi gusto, pero siempre que tenga un punto de inicio y un punto final, puede hacerlo.

Luego actualizaremos el nuestro. setDate() función para que actualice las variables para nuestros puntos de inicio y finalización del 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 este sea el final de la manecilla de la hora, debemos hacer que nuestro punto final sea el mismo que 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 nuevamente con JavaScript:

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 el minutero tenga un ángulo menor que el de la hora. Nuestro gradiente cónico se estropeará en el momento en que el minutero se mueva detrás de él. 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;
}

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

Ahí lo tienes, ahora las manecillas de horas y minutos están configuradas en ángulos degradados:

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir