Valós idejű óra készítése kúpos színátmenettel

A színátmenetek már jó ideje a CSS-spektrum részét képezik. Sok sugárirányú és lineáris gradienst látunk sok projektben, de van egyfajta gradiens, amely kissé magányosnak tűnik: a kúpos gradiens. Ezzel a fajta színátmenettel egy óralapot fogunk készíteni.

Munka kúpos gradiensekkel

Az általunk készített színátmenet egy középpont körül elforgatott színátmenetekből áll, és több színértékkel is rendelkezhet. Ahhoz, hogy ez az óra működjön, egy kúpos gradiens szögértékét is használjuk, amely meghatározza a forgatást vagy a kezdőpontot. A szöget a segítségével határozzuk meg from értéket.

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

Ennek az az érdekessége, hogy a kezdőszögnek negatív értéke is lehet a CSS-ben, ami később jól jön.

Egy egyszerű, elegáns példa a kúpos gradiensre:

Az alapvető óránk elkészítése

Kezdjük azzal, hogy adjunk hozzá néhány HTML-t az óra és a mutatók számára:

Hozzuk létre az óránk alapértelmezett stílusát. Ahhoz, hogy ez megfelelően működjön, a későbbiekben frissítjük a CSS-változókat JavaScript-el, tehát tekintsük át ezeket a változókat .clock választó. Az egyszerű finomítás érdekében adjuk hozzá a kezek színeit is.

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

Ez beállít bennünket az óra általános stílusához. Beállítottuk transform-origin a mutatókon, hogy megfelelően forogjanak az óra számlapja körül. Van néhány egyéni tulajdonság is a mutatók szögeinek beállításához, amelyeket JavaScript-el frissítünk, hogy az időzítés megfelelő legyen, így az egyes leosztások ennek megfelelően másodpercekre, percekre és órákra vonatkoztathatók.

Íme, amit eddig kaptunk:

Rendben, folytassuk az egyéni tulajdonságok frissítését!

A JavaScript hozzáadása az alapóránkhoz

Először is megcélozzuk az óránkat, és létrehozunk egy függvényt:

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

A függvényünkön belül a pontos időt fogjuk lekérni a Date() funkció a kezek helyes szögének kiszámításához:

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;

A számítás a következőképpen működik:

• Másodpercek: 60 másodpercet veszünk, és megszorozzuk vele 6, ami történetesen az 360, a tökéletes számú szög egy teljes körben.
• Percek: Ugyanaz, mint a másodperc, de most összeadjuk a másodpercek szögét, és elosztjuk vele 60 hogy a szöget percen belül egy kicsit növelje a pontosabb eredmény érdekében.
• Óra: Először kiszámoljuk az óra hátralévő részét, és elosztjuk vele 12. Ezután a maradékot elosztjuk vele 12 ismét, hogy egy tizedes értéket kapjunk, amellyel megszorozhatjuk 360. Például amikor a 23. óránál járunk, 23 / 12 = remain 11. Ezt elosztjuk 12-vel, és megkapjuk 0.916 ami aztán megszorozódik vele 360 összesen 330. Itt ugyanazt csináljuk, mint a percekkel, és hozzáadjuk a percszöget osztva 12, a pontosabb eredmény érdekében.

Most, hogy megvannak a szögeink, nincs más dolgunk, mint frissíteni az óránk változóit a következővel a függvény végére:

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

Végül, de nem utolsósorban egy másodperces időközönként aktiváljuk a függvényt, hogy működő órát kapjunk:

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

Tekintse meg alapóránk működő bemutatóját:

Ezt kúpos gradiensre alkalmazva

Rendben, az óránk mutatói működnek. Valójában egy kúpos gradiensre szeretnénk leképezni őket, amely az idő változásával frissül. Lehet, hogy ugyanezt a hatást tapasztaltad, ha aktív „Gradient” előlappal rendelkező Apple Watchod van:

Ehhez kezdjük a mi frissítésünkkel .clock elem kúpos gradienssel és két egyéni tulajdonsággal, amelyek szabályozzák a kezdő és a végszöget:

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

Kicsit játszhatsz ezzel, hogy úgy alakítsd, ahogy neked tetszik. Tetszés szerint hozzáadtam néhány extra színt a színátmenetben, de amíg van kiindulási és végpontod, addig jó.

Legközelebb frissítjük setDate() függvényt úgy, hogy frissítse a kezdő- és végpontunk változóit a kúpos gradiensen. A kiindulópont a másodpercmutatónk lesz, amit könnyű megtalálni, mert megegyezik a perceink szögével. Ahhoz, hogy ez az óramutatóban véget érjen, a végpontunkat azonosnak kell tennünk a hourAngle változót a szkriptben, de vonjuk le belőle a kiindulópontunkat.

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

Most ismét frissíthetjük változóinkat JavaScripttel:

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

Úgy tűnik, ezen a ponton végezhetünk, de van egy fogás! Ez a számítás jól működik, amíg a percmutató kisebb szögű, mint az óramutató. A kúpos gradiensünk összezavarodik abban a pillanatban, amikor a percmutató elhalad mellette. Ennek kijavításához negatív értéket fogunk használni kiindulási pontként. Szerencsére könnyű észrevenni, ha ez megtörténik. Változóink frissítése előtt a következőket adjuk hozzá:

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

Kivonással 360 percszögünkből negatív értéket tudunk beállítani a mi startposition változó. Emiatt a negatív kezdőpont miatt a véghelyzetünket frissíteni kell az óraszöggel, levonva a kezdőpozícióval.

Tessék – most az óra- és percmutatók gradiensszögre vannak állítva:

Ez az! De ez ne akadályozza meg abban, hogy ezt még tovább vigye. Hozd létre saját stílusaidat, és oszd meg velem a megjegyzésekben, hogy megnézhessem őket. Íme egy kis inspiráció, amivel elindulhatsz: