Zephyrnet Logosu

Konik Gradyan Yüzlü Gerçek Zamanlı Saat Yapma

Tarih:

Gradyanlar, bir süredir CSS spektrumunun bir parçası olmuştur. Birçok projede çok sayıda radyal ve doğrusal gradyan görüyoruz, ancak biraz yalnız görünen bir gradyan türü var: konik gradyan. Bu tür bir gradyan kullanarak bir saat kadranı yapacağız.

Konik gradyanlarla çalışma

Yaptığımız şey, bir merkez noktası etrafında döndürülen renk geçişlerine sahip bir degradeden oluşuyor ve birden çok renk değerine sahip olabilir. Bu saatin çalışması için, dönüşü veya başlangıç ​​noktasını tanımlayan konik bir eğimin açı değerini de kullanacağız. Açı, bir kullanılarak tanımlanır from değeri.

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

Bununla ilgili ilginç olan şey, CSS'de bir başlangıç ​​açısının daha sonra kullanışlı olacak şekilde negatif bir değere sahip olabilmesidir.

Konik bir degradenin basit ve zarif bir örneği:

Temel saatimizi oluşturmak

Saat ve eller için biraz HTML ekleyerek başlayalım:

Saatimiz için bazı varsayılan stiller oluşturalım. Bunun düzgün çalışması için daha sonra CSS değişkenlerini JavaScript ile güncelleyeceğiz, bu yüzden bu değişkenleri .clock seçici. Kolay ince ayar için ellerin renklerini de ekleyelim.

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

Bu bizi saat için ihtiyacımız olan genel stili belirler. ayarladık transform-origin ellerde, saatin yüzü etrafında düzgün bir şekilde dönmeleri için. Ayrıca, ellerde açıları ayarlamak için birkaç özel özellik de vardır; bu, zamanlamayı tam olarak doğru yapmak için JavaScript ile güncelleyeceğiz, böylece her bir elin buna göre saniye, dakika ve saatle eşlenmesi.

İşte şimdiye kadar sahip olduklarımız:

Pekala, bu özel özellikleri güncellemeye geçelim!

Temel saatimiz için JavaScript ekleme

İlk olarak, saatimizi hedefleyeceğiz ve bir fonksiyon oluşturacağız:

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

Fonksiyonumuzun içinde, şu anki zamanı kullanarak Date() işlev ellerin doğru açısını hesaplamak için:

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;

Bu hesaplama şu şekilde çalışır:

  • saniye: 60 saniye sürüyor ve onu çarpıyoruz 6, olan 360, tam bir dairedeki mükemmel açı sayısı.
  • dakika: Saniye ile aynı, ancak şimdi saniye açısını ekliyoruz ve onu bölüyoruz. 60 Daha doğru bir sonuç için açıyı dakika içinde biraz artırmak için.
  • Saatleri: İlk olarak, saatin geri kalanını hesaplıyoruz ve onu bölüyoruz. 12. Sonra kalanı şuna böleriz 12 tekrar çarpabileceğimiz bir ondalık değer elde etmek için 360. Örneğin, 23. saatte olduğumuzda, 23 / 12 = remain 11. Bunu 12'ye bölersek şunu elde ederiz. 0.916 hangi daha sonra ile çarpılır 360 genel bir toplam için 330. Burada dakikalarla yaptığımızın aynısını yapacağız ve dakika açısını bölerek toplayacağız. 12, daha doğru bir sonuç için.

Artık açılarımızı aldığımıza göre geriye sadece fonksiyonumuzun sonuna aşağıdakileri ekleyerek saatimizin değişkenlerini güncellemek kalıyor:

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

Son olarak, ancak en az değil, çalışan bir saat elde etmek için işlevi bir saniye aralıklarla tetikleyeceğiz:

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

Temel saatimizin çalışan demosuna bakın:

Bunu konik bir degradeye uygulamak

Tamam, yani saatimizin kolları çalışıyor. Gerçekten istediğimiz şey, onları zaman değiştikçe güncellenen konik bir gradyanla eşleştirmek. "Gradient" yüzü etkin olan bir Apple Watch'unuz varsa aynı etkiyi görmüş olabilirsiniz:

kredi: Macworld

Bunu yapmak için, sayfamızı güncelleyerek başlayalım. .clock konik gradyan ve başlangıç ​​ve bitiş açılarını kontrol eden iki özel özelliğe sahip eleman:

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

Tam istediğiniz gibi şekillendirmek için bununla biraz oynayabilirsiniz. Degradeye bazı ekstra renkler ekledim, ancak bir başlangıç ​​ve bitiş noktanız olduğu sürece, gitmekte fayda var.

Sırada, güncelleyeceğiz setDate() fonksiyonu, konik gradyan üzerindeki başlangıç ​​ve bitiş noktalarımız için değişkenleri günceller. Başlangıç ​​noktası saniye ibremiz olacak, bu da dakikalarımızın açısıyla aynı olacağı için bulunması kolay. Bunu saat yönünde bitirmek için bitiş noktamızı saatle aynı yapmalıyız. hourAngle komut dosyasında değişken, ancak başlangıç ​​noktamızı ondan çıkarın.

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

Artık değişkenlerimizi tekrar JavaScript ile güncelleyebiliriz:

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

Bu noktada işimiz bitmiş gibi görünüyor ama bir püf noktası var! Bu hesaplama, akrep yelkovanından daha küçük bir açıya sahip olduğu sürece işe yarar. Dakika ibresi onu geçtiği anda konik eğimimiz dağınık olacaktır. Bunu düzeltmek için başlangıç ​​noktası olarak negatif bir değer kullanacağız. Neyse ki, bu olduğunda fark etmek kolaydır. Değişkenlerimizi güncellemeden önce aşağıdakileri ekleyeceğiz:

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

çıkararak 360 dakika açımızdan, bizim için negatif bir değer belirleyebiliriz. startposition değişken. Bu negatif başlangıç ​​noktası nedeniyle, bitiş konumumuz, başlangıç ​​konumundan çıkarılan saat açısıyla güncellenmelidir.

İşte başlıyoruz - şimdi akrep ve yelkovan eğim açılarına ayarlandı:

Bu kadar! Ancak bunun sizi daha da ileriye götürmekten alıkoymasına izin vermeyin. Kendi stillerinizi yaratın ve yorumlarda benimle paylaşın, böylece onları kontrol edebilirim. İşte size ilham verecek küçük bir ilham kaynağı:

spot_img

En Son İstihbarat

spot_img