Reaaliaikaisen kellon tekeminen kartiomaisella liukutaululla

Gradientit ovat olleet osa CSS-spektriä jo jonkin aikaa. Näemme paljon säteittäisiä ja lineaarisia gradientteja monissa projekteissa, mutta on olemassa yksi gradienttityyppi, joka näyttää olevan hieman yksinäinen: kartiomainen gradientti. Aiomme tehdä kellotaulun käyttämällä tämän tyyppistä gradienttia.

Työskentely kartiomaisten gradienttien kanssa

Se, mitä teemme, koostuu liukuväristä, jonka värisiirtymät on kierretty keskipisteen ympäri ja joilla voi olla useita väriarvoja. Jotta tämä kello toimisi, käytämme myös kartiomaisen gradientin kulma-arvoa, joka määrittää kierron tai aloituspisteen. Kulma määritellään käyttämällä a from arvoa.

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

Mielenkiintoista tässä on, että aloituskulmalla voi olla negatiivinen arvo CSS:ssä, mikä on hyödyllistä myöhemmin.

Yksinkertainen tyylikäs esimerkki kartiomaisesta gradientista:

Peruskellomme rakentaminen

Aloitetaan lisäämällä HTML-koodia kellolle ja osoittimille:

Luodaan jotain oletustyyliä kellollemme. Jotta tämä toimisi oikein, päivitämme CSS-muuttujat myöhemmin JavaScriptillä, joten otetaan nämä muuttujat käyttöön .clock valitsin. Säädämisen helpottamiseksi lisätään myös käsien värit.

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

Tämä luo meille yleisen tyylin, jota tarvitsemme kellolle. Olemme asettaneet transform-origin käsissä niin, että ne pyörivät oikein kellon kasvojen ympärillä. Siellä on myös muutamia mukautettuja ominaisuuksia käsien kulmien asettamiseen, ja päivitämme JavaScriptillä, jotta ajoitus on juuri oikea niin, että jokainen käsi kartoittaa sekunteja, minuutteja ja tunteja vastaavasti.

Tässä on mitä meillä on tähän mennessä:

Selvä, siirrytään näiden mukautettujen ominaisuuksien päivittämiseen!

JavaScriptin lisääminen peruskelloamme

Ensinnäkin kohdistamme kelloamme ja luomme toiminnon:

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

Toimintomme sisällä aiomme hakea nykyisen ajan käyttämällä Date() toiminto laskea käsien oikea kulma:

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;

Näin laskelma toimii:

• Sekunnit: Otamme 60 sekuntia ja kerromme sen 6, joka sattuu olemaan 360, täydellinen määrä kulmia täydessä ympyrässä.
• Minuutit: Sama kuin sekunnissa, mutta nyt lisäämme sekuntien kulman ja jaamme sen 60 suurentaaksesi kulmaa vain hieman minuutin sisällä saadaksesi tarkemman tuloksen.
• Tunnit: Ensin lasketaan jäljellä oleva tunti ja jaetaan se 12. Sitten jaamme tämän jäännöksen 12 uudelleen saadaksemme desimaaliarvon, jonka voimme kertoa 360. Esimerkiksi kun olemme 23. tunnilla, 23 / 12 = remain 11. Jaa tämä 12:lla ja saa 0.916 joka sitten kerrotaan 360 yhteensä 330. Tässä teemme saman asian kuin teimme minuuttien kanssa ja lisäämme minuuttikulman jaettuna 12, saadaksesi tarkemman tuloksen.

Nyt kun meillä on kulmat, ei jää muuta kuin päivittää kellomme muuttujat lisäämällä funktiomme loppuun seuraavat:

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

Viimeisenä, mutta ei vähäisimpänä, käynnistämme toiminnon sekunnin välein, jotta saadaan toimiva kello:

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

Katso peruskellomme toimiva demo:

Tämän soveltaminen kartiomaiseen gradienttiin

OK, joten kellomme osoittimet toimivat. Haluamme todella kartoittaa ne kartiomaiseen gradienttiin, joka päivittyy ajan muuttuessa. Olet saattanut nähdä saman vaikutuksen, jos sinulla on Apple Watch, jonka Gradient-kasvot ovat aktiivisia:

Aloitetaan päivittämällä tämä .clock elementti, jossa on kartiogradientti ja kaksi mukautettua ominaisuutta, jotka ohjaavat aloitus- ja loppukulmaa:

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

Voit leikkiä tämän kanssa ja muotoilla sen haluamallasi tavalla. Lisäsin gradienttiin joitain ylimääräisiä värejä mieleisekseen, mutta niin kauan kuin sinulla on aloitus- ja loppupiste, olet hyvä.

Seuraavaksi päivitämme omamme setDate() toimintoa niin, että se päivittää muuttujat kartiogradientin aloitus- ja loppupisteillemme. Lähtökohtana on sekuntiosoitin, joka on helppo löytää, koska se on sama kuin minuuttiemme kulma. Jotta tämä päättyisi tuntiosioon, meidän tulisi tehdä loppupisteestämme sama kuin hourAngle muuttuja skriptissä, mutta vähennä siitä lähtöpisteemme.

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

Nyt voimme jälleen päivittää muuttujamme JavaScriptillä:

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

Näyttää siltä, ​​​​että voisimme olla valmiit tässä vaiheessa, mutta siinä on saalis! Tämä laskelma toimii hyvin, kunhan minuuttiosoittimella on pienempi kulma kuin tuntiosoittimella. Kartiogradienttimme menee sekaisin sillä hetkellä, kun minuuttiosoitin on siirtynyt sen ohi. Tämän korjaamiseksi käytämme negatiivista arvoa lähtökohtana. Onneksi se on helppo havaita, kun tämä tapahtuu. Ennen muuttujien päivittämistä lisäämme seuraavat:

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

Vähentämällä 360 minuuttikulmastamme voimme asettaa negatiivisen arvon startposition muuttuja. Tästä negatiivisesta aloituspisteestä johtuen päätepisteemme tulisi päivittää tuntikulmalla, josta vähennetään aloitussijainti.

Siinä mennään – nyt tunti- ja minuuttiosoittimet on asetettu gradienttikulmiin:

Se siitä! Mutta älä anna sen estää sinua viemästä tätä vielä pidemmälle. Luo omia tyylejäsi ja jaa ne kanssani kommenteissa, jotta voin tutustua niihin. Tässä on vähän inspiraatiota, jotta pääset liikkeelle: