Buat Jam Menggunakan Fungsi trigonometri sin() dan cos() CSS Baru | Trik CSS – Beragampengetahuan

Trigonometri CSS ada di sini! Nah, jika Anda menggunakan Firefox dan Safari versi terbaru. Memiliki kemampuan matematis dalam CSS ini membuka banyak sekali kemungkinan. Dalam tutorial ini, saya rasa kita harus mencelupkan jari kaki kita ke dalam air untuk merasakan beberapa fitur baru: sin() Dan cos().

Ada fungsi trigonometri lainnya di dalam pipa — termasuk tan() – jadi mengapa hanya fokus pada sin() Dan cos()? Mereka kebetulan sempurna untuk ide saya menempatkan teks di sepanjang tepi lingkaran. Itu ditampilkan di beragampengetahuan ketika Chris berbagi cara menggunakan mixin Sass. Itu enam tahun yang lalu, jadi mari kita berikan perawatan yang canggih.

Ini adalah ide saya. Selain itu, saat ini hanya didukung di Firefox dan Safari:

Jadi, ini tidak persis seperti kata-kata yang membentuk lingkaran, melainkan kami menempatkan karakter teks di sepanjang lingkaran untuk membentuk tampilan jam. Berikut beberapa markup yang dapat kita gunakan untuk memulai:

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time>
    <time datetime="1:00">1</time>
    <time datetime="2:00">2</time>
    <time datetime="3:00">3</time>
    <time datetime="4:00">4</time>
    <time datetime="5:00">5</time>
    <time datetime="6:00">6</time>
    <time datetime="7:00">7</time>
    <time datetime="8:00">8</time>
    <time datetime="9:00">9</time>
    <time datetime="10:00">10</time>
    <time datetime="11:00">11</time>
  </div>
</div>

Selanjutnya, berikut adalah beberapa gaya super dasar .clock-face wadah.Saya memutuskan untuk menggunakan <time> ditandai sebagai datetime Atribut.

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width var(--_ow);
}

Saya melakukan beberapa dekorasi di sana, tetapi hanya untuk mendapatkan bentuk dasar dan warna latar belakang untuk membantu kami memahami apa yang kami lakukan.perhatikan bagaimana kita menabung width Nilai dalam variabel CSS. Kami akan menggunakannya nanti. Tidak ada yang bisa dilihat sejauh ini:

Sepertinya semacam eksperimen seni modern, bukan? Mari perkenalkan variabel baru, --_rputaran penyimpanan radius, sama dengan setengah lebar lingkaran. Jadi, jika lebar (--_w) berubah, nilai radius (--_r) juga akan diperbarui – berkat fungsi matematika CSS lainnya, calc():

.clock {
  --_w: 300px;
  --_r: calc(var(--_w) / 2);
  /* rest of styles */
}

Sekarang, sedikit matematika. Sebuah lingkaran adalah 360 derajat. Kami memiliki 12 label pada jam kami, jadi ingin menempatkan angka setiap 30 derajat (360 / 12).Dalam matematika, lingkaran dimulai pada jam 3, jadi sebenarnya siang minus 90 derajat Dari sana, 270 derajat (360 - 90).

Mari tambahkan variabel lain, --_dkita dapat menggunakan untuk mengatur a derajat Nilai setiap angka pada tampilan jam. Kami akan meningkatkan nilainya sebesar 30 derajat untuk menyelesaikan lingkaran kami:

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
.clock time:nth-child(4) { --_d: 0deg; }
.clock time:nth-child(5) { --_d: 30deg; }
.clock time:nth-child(6) { --_d: 60deg; }
.clock time:nth-child(7) { --_d: 90deg; }
.clock time:nth-child(8) { --_d: 120deg; }
.clock time:nth-child(9) { --_d: 150deg; }
.clock time:nth-child(10) { --_d: 180deg; }
.clock time:nth-child(11) { --_d: 210deg; }
.clock time:nth-child(12) { --_d: 240deg; }

Ok, sekarang saatnya kita mengotori tangan kita sin() Dan cos() Fungsi! Yang ingin kami lakukan adalah menggunakannya untuk mendapatkan koordinat X dan Y dari setiap angka sehingga kami dapat menempatkannya dengan benar di tampilan jam.

Rumus untuk koordinat X adalah radius + (radius * cos(degree))Mari kita pasang ke yang baru --_x Mengubah:

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

Rumus untuk koordinat Y adalah radius + (radius * sin(degree)). kita memiliki sesuatu yang perlu kita hitung:

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

Kita perlu melakukan beberapa pembersihan untuk mengatur angka, jadi mari kita tambahkan beberapa gaya dasar untuk memastikan mereka benar-benar diposisikan dan ditempatkan menggunakan koordinat kita:

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  --_sz: 12cqi;
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

Melihat --_szkami akan menggunakan width Dan height Angka untuk sementara. Mari kita lihat apa yang kita miliki sejauh ini.

Ini jelas lebih mirip jam! Lihat bagaimana pojok kiri atas setiap angka diposisikan di tempat yang benar di sekitar lingkaran? Kita perlu “mengecilkan” radius saat menghitung posisi setiap angka.kita dapat mengurangi Ukuran bilangan (--_sz) dari ukuran lingkaran (--_w), sebelum kita menghitung radius:

--_r: calc((var(--_w) - var(--_sz)) / 2);

jauh lebih baik! Mari ubah warnanya agar terlihat lebih elegan:

Kita bisa berhenti di sini! Kami mencapai tujuan kami untuk menempatkan teks di sekitar lingkaran, bukan? Tapi apa itu jam tanpa jarum jam yang menunjukkan jam, menit, dan detik?

Mari gunakan animasi CSS untuk ini. Pertama, mari tambahkan tiga elemen lagi ke markup kita,

<div class="clock">
  <!-- after <time>-tags -->
  <span class="arm seconds"></span>
  <span class="arm minutes"></span>
  <span class="arm hours"></span>
  <span class="arm center"></span>
</div>

Lalu ada beberapa tanda umum untuk ketiga senjata tersebut. Sekali lagi, sebagian besar hanya memastikan lengan benar-benar diposisikan dan diposisikan sesuai:

.arm {
  background-color: var(--_abg);
  border-radius: calc(var(--_aw) * 2);
  display: block;
  height: var(--_ah);
  left: calc((var(--_w) - var(--_aw)) / 2);
  position: absolute;
  top: calc((var(--_w) / 2) - var(--_ah));
  transform: rotate(0deg);
  transform-origin: bottom;
  width: var(--_aw);
}

kami akan menggunakan animasi yang sama Untuk ketiga senjata:

@keyframes turn {
  to {
    transform: rotate(1turn);
  }
}

Satu-satunya perbedaan adalah waktu yang dibutuhkan setiap lengan untuk membuat satu revolusi.untuk lengan jamdibutuhkan 12 jam Lakukan putaran penuh.ini animation-duration Properti hanya menerima nilai dalam milidetik dan detik. Mari kita tetap dengan detik, yaitu 43.200 detik (60 seconds * 60 minutes * 12 hours).

animation: turn 43200s infinite;

dibutuhkan 1 jam untuk lengan terbelah Lakukan putaran penuh. Tapi kami ingin ini menjadi animasi multi-langkah, sehingga gerakan antara lengan terhuyung-huyung daripada linier. Kami membutuhkan 60 langkah, satu langkah per menit:

animation: turn 3600s steps(60, end) infinite;

ini lengan kedua Ya hampir sama Sebagai lengan menit, tetapi dengan durasi 60 detik, bukan 60 menit:

animation: turn 60s steps(60, end) infinite;

Mari perbarui atribut yang kita buat dalam gaya umum:

.seconds {
  --_abg: hsl(0, 5%, 40%);
  --_ah: 145px;
  --_aw: 2px;
  animation: turn 60s steps(60, end) infinite;
}
.minutes {
  --_abg: #333;
  --_ah: 145px;
  --_aw: 6px;
  animation: turn 3600s steps(60, end) infinite;
}
.hours {
  --_abg: #333;
  --_ah: 110px;
  --_aw: 6px;
  animation: turn 43200s linear infinite;
}

Bagaimana jika kita ingin memulai dari waktu sekarang? Kami membutuhkan beberapa JavaScript:

const time = new Date();
const hour = -3600 * (time.getHours() % 12);
const mins = -60 * time.getMinutes();
app.style.setProperty('--_dm', `${mins}s`);
app.style.setProperty('--_dh', `${(hour+mins)}s`);

sudah saya add id="app" ke tampilan jam dan setel dua properti khusus baru di atasnya, setel negatif animation-delay, seperti yang dilakukan Mate Marschalko saat dia membagikan jam CSS murni.ini getHours() Metode JavaScript Date objek menggunakan jam 24 jam, jadi kami menggunakan remainder operator untuk mengubahnya menjadi format 12 jam.

Di CSS kita perlu menambahkan animation-delay di samping itu:

.minutes {
  animation-delay: var(--_dm, 0s);
  /* other styles */
}

.hours {
  animation-delay: var(--_dh, 0s);
  /* other styles */
}

Dan satu hal lagi. gunakan css @supports dan properti yang telah kami buat sehingga kami dapat menyediakan fallback untuk browser yang tidak mendukung sin() Dan cos().(Terima kasih Temani Afif!):

@supports not (left: calc(1px * cos(45deg))) {
  time {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) rotate(var(--_d)) translate(var(--_r)) rotate(calc(-1*var(--_d)))
  }
}

Dan, voila! Jam kita sudah selesai! Ini demo terakhir. Sekali lagi, saat ini hanya didukung di Firefox dan Safari.

Mau bagaimana lagi?

Hanya main-main di sini, tapi kita bisa melakukannya dengan mengganti <time> ditandai sebagai <img> Kemudian perbarui lebar (--_w) dan jari-jari (--_r) nilai:

Mari coba lagi. Saya sebutkan sebelumnya bahwa jam itu terlihat seperti eksperimen seni modern. Kita dapat memanfaatkan ini dan membuat ulang pola yang saya lihat pada poster di galeri seni tempo hari (sayangnya saya tidak membelinya). Seingat saya, itu disebut “bulan” dan terdiri dari serangkaian titik.

Kami akan menggunakan unordered list kali ini karena lingkaran tidak mengikuti urutan tertentu. Kami bahkan tidak akan memasukkan semua item daftar ke dalam markup. Sebagai gantinya, mari masukkan mereka dengan JavaScript dan tambahkan beberapa kontrol yang bisa kita gunakan untuk memanipulasi hasil akhir.

Kontrol adalah input rentang (<input type="range">) Kami akan membungkusnya <form> dan dengarkan input peristiwa.

<form id="controls">
  <fieldset>
    <label>Number of rings
      <input type="range" min="2" max="12" value="10" id="rings" />
    </label>
    <label>Dots per ring
      <input type="range" min="5" max="12" value="7" id="dots" />
    </label>
    <label>Spread
      <input type="range" min="10" max="40" value="40" id="spread" />
    </label>
  </fieldset>
</form>

Kami akan menjalankan metode ini pada “input”, yang akan membuat banyak <li> Derajat adalah (--_d) variabel yang kita gunakan sebelumnya diterapkan ke setiap variabel. Kami juga dapat menggunakan kembali variabel radius (--_r).

Saya juga ingin poin menjadi warna yang berbeda.Jadi, mari kita mengacak (yah, tidak sama sekali mengacak) nilai warna HSL dari setiap item daftar dan menyimpannya sebagai variabel CSS baru, --_bgc:

const update = () => {
  let s = "";
  for (let i = 1; i <= rings.valueAsNumber; i++) {
    const r = spread.valueAsNumber * i;
    const theta = coords(dots.valueAsNumber * i);
    for (let j = 0; j < theta.length; j++) {
      s += `<li style="--_d:${theta[j]};--_r:${r}px;--_bgc:hsl(${random(
        50,
        25
      )},${random(90, 50)}%,${random(90, 60)}%)"></li>`;
    }
  }
  app.innerHTML = s;
}

ini random() metode untuk memilih nilai dalam rentang angka yang ditentukan:

const random = (max, min = 0, f = true) => f ? Math.floor(Math.random() * (max - min) + min) : Math.random() * max;

Itu dia. Kami menggunakan JavaScript untuk merender markup, tetapi setelah dirender, kami tidak terlalu membutuhkannya.ini sin() Dan cos() fungsi membantu kita untuk menempatkan semua poin di posisi yang benar.

pikiran akhir

Menempatkan benda-benda di sekitar lingkaran adalah contoh yang sangat mendasar yang menunjukkan kekuatan trigonometri, mis. sin() Dan cos()tapi itu nyata Sangat keren bahwa kami mendapatkan fitur CSS modern yang memberikan solusi baru untuk solusi lama dan saya yakin kami akan melihat kasus penggunaan yang lebih menarik, kompleks, dan kreatif, terutama karena browser mendukung Chrome dan Edge.