Membuat Jam Real-Time Dengan Wajah Gradien Kerucut

Gradien telah menjadi bagian dari spektrum CSS untuk beberapa waktu sekarang. Kami melihat banyak gradien radial dan linier di banyak proyek, tetapi ada satu jenis gradien yang tampaknya agak sepi: gradien kerucut. Kita akan membuat tampilan jam menggunakan jenis gradien ini.

Bekerja dengan gradien kerucut

Apa yang kami buat terdiri dari gradien dengan transisi warna yang diputar di sekitar titik tengah dan dapat memiliki beberapa nilai warna. Agar jam ini berfungsi, kita juga akan menggunakan nilai sudut gradien kerucut yang menentukan rotasi atau titik awal. Sudut ditentukan dengan menggunakan from nilai.

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

Yang menarik dari ini, adalah bahwa sudut awal dapat memiliki nilai negatif dalam CSS, yang akan berguna nanti.

Contoh elegan sederhana dari gradien kerucut:

Membangun jam dasar kita

Mari kita mulai dengan menambahkan beberapa HTML untuk jam dan jarum:

Mari kita buat beberapa gaya default untuk jam kita. Agar ini berfungsi dengan baik, kami akan memperbarui variabel CSS dengan JavaScript nanti, jadi mari kita cakup variabel ini di dalam .clock pemilih. Untuk tweaking mudah, mari tambahkan warna tangan juga.

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

Ini mengatur kita dengan gaya umum yang kita butuhkan untuk jam. Kami telah menetapkan transform-origin di tangan sehingga mereka berputar dengan benar di sekitar muka jam. Ada juga beberapa properti khusus di sana untuk mengatur sudut pada jarum yang akan kami perbarui dengan JavaScript untuk mendapatkan waktu yang tepat sehingga setiap jarum memetakan ke detik, menit, dan jam yang sesuai.

Inilah yang kami miliki sejauh ini:

Baiklah, mari kita lanjutkan untuk memperbarui properti khusus itu!

Menambahkan JavaScript untuk jam dasar kami

Pertama, kita akan menargetkan jam kita dan membuat fungsi:

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

Di dalam fungsi kami, kami akan mengambil waktu saat ini menggunakan Date() fungsi untuk menghitung sudut tangan yang benar:

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;

Berikut adalah cara kerja perhitungan ini:

• Detik: Kami mengambil 60 detik dan mengalikannya dengan 6, yang kebetulan 360, jumlah sudut sempurna dalam satu lingkaran penuh.
• Menit: Sama seperti detik, tapi sekarang kita tambahkan sudut detik dan membaginya dengan 60 untuk meningkatkan sudut hanya sedikit dalam satu menit untuk hasil yang lebih akurat.
• Jam: Pertama, kami menghitung sisa jam dan membaginya dengan 12. Kemudian kita bagi sisa itu dengan 12 lagi untuk mendapatkan nilai desimal kita dapat mengalikannya dengan 360. Misalnya, saat kita berada di jam ke-23, 23 / 12 = remain 11. Bagilah ini dengan 12 dan kita dapatkan 0.916 yang kemudian dikalikan dengan 360 untuk total keseluruhan 330. Di sini, kita akan melakukan hal yang sama seperti yang kita lakukan dengan menit dan menambahkan sudut menit, dibagi dengan 12, untuk hasil yang lebih akurat.

Sekarang kita memiliki sudut kita, satu-satunya yang tersisa untuk dilakukan adalah memperbarui variabel jam kita dengan menambahkan yang berikut di akhir fungsi kita:

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

Terakhir, namun tidak kalah pentingnya, kami akan memicu fungsi dengan interval satu detik untuk mendapatkan jam kerja:

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

Lihat demo kerja jam dasar kami:

Menerapkan ini ke gradien kerucut

OK, jadi jarum jam kita bekerja. Yang benar-benar kami inginkan adalah memetakannya ke gradien kerucut yang diperbarui seiring waktu berubah. Anda mungkin telah melihat efek yang sama jika Anda memiliki Apple Watch dengan wajah "Gradien" aktif:

Untuk melakukan ini, mari kita mulai dengan memperbarui .clock elemen dengan gradien kerucut dan dua properti khusus yang mengontrol sudut awal dan akhir :

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

Anda dapat bermain-main dengan ini sedikit untuk menatanya sesuai keinginan Anda. Saya menambahkan beberapa warna ekstra dalam gradien sesuai dengan keinginan saya, tetapi selama Anda memiliki titik awal dan titik akhir, Anda dapat melakukannya.

Selanjutnya, kami akan memperbarui setDate() berfungsi sehingga memperbarui variabel untuk titik awal dan akhir kita pada gradien kerucut. Titik awalnya adalah jarum detik kita, yang mudah ditemukan karena akan sama dengan sudut menit kita. Untuk mengakhiri ini pada jarum jam, kita harus membuat titik akhir kita sama dengan hourAngle variabel dalam skrip, tetapi kurangi titik awal kami darinya.

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

Sekarang kita dapat memperbarui variabel kita dengan JavaScript lagi:

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

Sepertinya kita bisa selesai pada saat ini, tetapi ada masalah! Perhitungan ini bekerja dengan baik selama jarum menit memiliki sudut yang lebih kecil dari jarum jam. Gradien kerucut kita akan menjadi berantakan saat jarum menit bergerak melewatinya. Untuk memperbaikinya, kita akan menggunakan nilai negatif sebagai titik awal. Untungnya, mudah dikenali ketika ini terjadi. Sebelum memperbarui variabel kami, kami akan menambahkan yang berikut:

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

Dengan mengurangkan 360 dari sudut menit kami, kami dapat menetapkan nilai negatif untuk kami startposition variabel. Karena titik awal negatif ini, posisi akhir kita harus diperbarui dengan sudut jam, dikurangi dengan posisi awal.

Ini dia — sekarang jarum jam dan menit disetel ke sudut gradien:

Itu dia! Tapi jangan biarkan hal itu menghentikan Anda dari mengambil ini lebih jauh. Buat gaya Anda sendiri dan bagikan dengan saya di komentar sehingga saya dapat memeriksanya.. Berikut adalah sedikit inspirasi untuk membuat Anda maju: