Teknologi animasi CSS berbasis waktu

Memanfaatkan Pendekatan Berbasis Waktu untuk Animasi CSS

• Dengan ditambahkannya dukungan fungsi matematika di CSS, pendekatan animasi CSS berbasis waktu dapat diterapkan kembali
  • Fungsi mod(), round(), trigonometri, dan lain-lain didukung
  • Untuk melihat demo, mungkin perlu mengaktifkan fitur eksperimental

Konsep Dasar

• Menggunakan CSS Houdini API, Anda dapat menentukan variabel kustom untuk melacak waktu (milidetik)
  • Menggunakan aturan @property untuk mendefinisikan variabel --t dan menyetel nilai awalnya ke 0
  • Menggunakan aturan @keyframes untuk menaikkan nilai --t secara linear selama 24 jam (86,400,000ms)
  • Nilai-nilai lain yang berbasis --t berubah bersama-sama dan menciptakan efek animasi
  • Nilai variabel --t dapat ditampilkan dengan fungsi counter()

Kontrol Laju Frame

• Mempertahankan interval pembaruan pada 60 frame per detik (FPS) sudah cukup untuk animasi yang halus
• Jika perlu, kecepatan frame bisa dikendalikan secara manual dengan fungsi step()
  • Gunakan fungsi step() pada properti animation-timing-function untuk menghitung nilai FPS yang diinginkan

Konversi Waktu

• Karena nilai --t meningkat secara terus-menerus dalam satu arah, ini mungkin kurang cocok untuk beberapa properti CSS
• Menggunakan min() memungkinkan animasi berhenti ketika mencapai nilai tertentu
• Menggunakan mod() memungkinkan animasi dimulai ulang
• sin() dapat digunakan untuk membuat efek gerak maju mundur

Fungsi Easing Kustom

• Menggunakan fungsi matematika dan variabel --t, Anda bisa membuat fungsi easing kustom
• Efek yang sulit dicapai dengan cubic-bezier() dapat dibuat
• Contoh: ease-out-cubic, ease-out-elastic, dan lain-lain

Eksperimen CSS Doodle

• Pada ekspresi kompleks, var() dan calc() dapat menurunkan keterbacaan kode
• Pada css-doodle, Anda dapat merepresentasikan variabel --t dengan fungsi @t
• Versi terbaru css-doodle memungkinkan ekspresi matematika sederhana secara langsung di dalam argumen
• Fungsi @T dan @TS juga disediakan
  • @T mewakili waktu sejak awal hari
  • @TS adalah bentuk ringkas dari @t(/1000) untuk melacak waktu dalam detik
• Contoh jam dan gerakan melompat dapat diimplementasikan menggunakan css-doodle

Kesimpulan

• Pendekatan yang menjadikan waktu sebagai variabel ini sangat menarik
• Keyframes mungkin terasa lebih intuitif, tetapi dalam adegan demo dengan banyak kalkulasi dan variabel input, penggunaan waktu sebagai variabel dapat menghasilkan beragam output

Opini GN⁺

• Teknik animasi CSS berbasis waktu tidak hanya memperluas ruang lingkup animasi yang bisa dibuat dengan CSS, tetapi juga terlihat membuka potensi kolaborasi dengan teknologi lain seperti shader dan WebGL
• Penggunaan bersama CSS Houdini, CSS Doodle, dan alat serupa kemungkinan membuat ekspresi jadi lebih fleksibel dan beragam
• Namun, akan ada hal-hal yang harus dipertimbangkan saat menerapkan di proyek nyata, seperti kompatibilitas browser atau isu performa. Disarankan untuk membandingkan kelebihan dan kekurangan pendekatan keyframe dan memilih penggunaannya secara selektif
• Juga perlu menganalisis kelebihan dan kekurangan dibandingkan perpustakaan animasi profesional seperti GSAP. Baik juga untuk mencari cara penggunaannya secara saling melengkapi
• Diharapkan semakin banyak contoh dan kasus penggunaan animasi CSS berbasis waktu yang dibagikan, agar pengembang frontend lebih mudah menerapkannya

[GN⁺]

Komentar Hacker News

• Dengan CSS, Anda bisa mengontrol kemajuan animasi melalui JavaScript menggunakan nilai animation-delay negatif. Misalnya, saat mengatur animation-delay: -1500ms, animasi dimulai secara instan tetapi langsung loncat ke titik 1,5 detik. Dengan memanipulasi nilai ini lewat JavaScript, Anda dapat melakukan scrubbing pada animasi CSS dan membuat semua animasi agar kompatibel dengan loop tick hitung-perbarui-render bergaya mesin game.

• Begitu Anda sudah masuk ke tingkat lebih dari sekadar easing sederhana atau keyframe dasar satu-dua kanal, Anda cepat sekali menemukan keterbatasan pendekatan ini. Theatre.js berguna karena berisi UI studio dengan timeline untuk mengedit keyframe dan kurva Bézier, plus runtime yang menginterpolasi nilai-nilai terhadap timeline, sangat cocok saat membutuhkan animasi yang disetel.

• Artikel ini memanfaatkan @property CSS kustom dengan tingkat dukungan browser 88%. Perlu diperhatikan bahwa cara setiap browser menetapkan nilai awal berbeda. Chrome menggunakan nilai awal jika nilainya tidak ditentukan atau tidak valid, sedangkan Firefox hanya saat nilainya tidak ditentukan. Ini mungkin tidak jadi masalah di sebagian besar proyek, tapi untuk mengatasi inkonsistensi implementasi lintas browser, Anda mungkin perlu menetapkan nilai default Firefox via JavaScript.

• CSS sudah mendukung fungsi matematika yang cukup, seperti mod(), round(), dan fungsi trigonometri. CSS tidak bisa memulai timer seperti JavaScript, tetapi saat ini Anda bisa mendefinisikan variabel kustom lewat CSS Houdini API untuk melacak waktu dalam milidetik. Tapi kalau sudah ada JavaScript, untuk apa semua ini? Bukankah layer rendering seharusnya hanya berfokus pada primitive rendering? Kenapa harus terus menambah lapisan yang semakin tinggi?

• Jam yang dibuat terlihat sangat halus. Tulisan ini ditulis dengan sangat baik. Chrome belum merilis dukungan CSS untuk mod(), jadi tanpa menggunakan rilis pratinjau, sebagian besar contoh di halaman ini tidak akan beranimasi.

• Kalau ingin animasi CSS yang halus di semua browser tanpa perlu mengontrol tick, metode FLIP sangat berguna.

• Saya ingin membuat sesuatu seperti 'box breathing', di mana Anda bisa menyesuaikan setiap tahap tarikan napas-hentikan-hembus-hentikan agar sesuai dengan tubuh Anda dan menghasilkan efek yang diinginkan, tetapi saya tidak menemukan cara yang bisa dilakukan tanpa halaman semacam ini (tanpa JS atau kompleksitas luar biasa). Halaman ini memiliki demo yang benar-benar kreatif!

• Menariknya, demo pra-mod() bisa bekerja, sedangkan mod() dan sin() sama sekali tidak berfungsi di Chrome Android terbaru.

• Animasi di bagian bawah halaman sangat impresif. Mirip dengan , bukan elemen .

• Sangat impresif, tapi rasanya ini mendekati titik yang dulu bisa dilakukan dengan Flash puluhan tahun lalu. Saya tidak berharap Flash kembali, tapi akan sangat bagus jika ada alat yang lebih ramah pengguna untuk membuat animasi CSS.