CSS mampu mengekspresikan banyak perkara dalam hal grafik, terutamanya animasi.Popkorn mengambil idea itu dan berjalan dengannya: format mudah alih + masa jalan untuk grafik bergerak, tempat korang menulis adegan dalam sintaks yang korang sudah tahu dan menjalankan fail yang sama di web dan pada mudah alih asli.Ia menjadikan beberapa perkara yang benar-benar kompleks, dan ia membawa masuk hampir mana-mana fail Lottie tanpa memecahkan apa-apa, biasanya pada saiz fail yang lebih rendah daripada sumber.Dan ia bukan sekadar main balik: adegan boleh menjadi benar-benar interaktif, dengan keadaan :hover dan :active, mesin keadaan dan input langsung, semuanya tanpa barisan skrip.Ia bermula sebagai peribadi yang DIPELIHARA_7_ENDPRESERVED dan bertukar menjadi bukti konsep yang lebih jauh daripada yang saya jangkakan.Masih terlalu awal, tetapi idea itu jelas berkesan.Pemandangan yang lengkap
Berikut ialah keseluruhan adegan Popkorn: bola, jatuh dan melantun, yang berwarna hangat apabila korang menghalakannya.:root {
lebar: 400px;
ketinggian: 400px;
latar belakang: #1a1a2e;
}
@keyframes melantun {
0% {
transform: translateY(0);
animasi-masa-function: cubic-bezier(0.33, 0, 1, 1);
}
50% {
transform: translateY(180px);
animasi-masa-function: cubic-bezier(0, 0, 0.67, 1);
}
100% {
transform: translateY(0);
}
}
#bola {
jenis: bulatan;
cx: 200px;
cy: 80px;
r: 36px;
isi: #ff6b6b;
animasi: lantun 1.2s linear infinite;
peralihan: mengisi 250ms mudah;
&:legar {
isi: #ffd166;
}
}
if korang telah menulis CSS, korang sudah boleh membaca setiap baris.Tuding pada bola dan peralihan memanaskan warnanya manakala lantunan tidak pernah berhenti seketika atau RESTarts.Itulah salah satu kejutan yang lebih menarik: keadaan interaktif seperti :hover mengarang di atas animasi yang sedang berjalan dan bukannya melawannya, kerana keseluruhan adegan dimainkan pada satu garis masa yang berterusan.Mengapa DIPELIHARA_4_END DIPELIHARA
Ini adalah keseluruhan idea, bukan jalan pintas.Popkorn berpegang kepada satu peraturan: if CSS sudah mempunyai cara untuk menyatakan sesuatu, gunakannya, dengan semantik sebenar.Laluan gerakan ialah laluan offset.Pegangan adalah peringkat akhir.Terhuyung-hayang adalah kelewatan animasi negatif.Lapisan ialah indeks-z.Ia tidak pernah mencipta sintaks CSS sudah ada.(Ia tidak CSS. Ia adalah dialek yang rapat, disimpan sedekat mungkin dengan perkara sebenar, dan mungkin beberapa bahagian yang baik akan pergi ke hulu suatu hari nanti 🤞)
Kekal sedekat ini membeli sesuatu yang jarang berlaku: satu format dua sangat difkhalayak yang berbeza sudah membaca.Orang sudah bercakap.Terdapat komuniti yang bersemangat membuat benar-benar indahiful seni dalam tulisan tangan CSS.Popkorn bertemu mereka di mana mereka berada, tanpa model mental baharu.Model bahasa sudah pun bercakap, secara percuma.Oleh kerana formatnya berbentuk CSS, model menulis Popkorn yang sah daripada data latihan sedia ada dengan bimbingan yang minimum.Tiada model yang diperhalusi, tiada format yang dipesan lebih dahulu untuk diajar.Galeri contoh taman permainan itu sendiri sepenuhnya dijana LLM.Hasilnya ialah format yang boleh dikarang dengan tangan, difable dalam permintaan tarik dan boleh dijana oleh LLM, sekaligus.Dan kerana adegan hanya .CSS, korang mendapat penyerlahan sintaks percuma pada GitHub dan dalam setiap editor.Bawa Lottie korang sendiri, kemudian baru minta perubahan
Inilah bahagian yang saya rasa paling menyeronokkan.Letakkan fail Lottie sedia ada (atau SVG) ke dalam taman permainan dan ia menukar, tidak berubah, menjadi pemandangan Popkorn yang boleh dibaca yang dimainkan semula dengan setia.Tiada pengarang semula, tiada pas pembersihan.Tetapi kini ia jelas, teks berbentuk CSS, supaya korang boleh meneruskan: minta Copilot mewarnakannya semula, perlahankan pemasaan, tukar gerakan atau wayar dalam keadaan :hover, semuanya dalam bahasa semula jadi, pada fail yang korang juga boleh buka dan edit dengan tangan.Gumpalan Lottie JSON yang legap menjadi sesuatu yang sebenarnya korang boleh berbual.Apa yang boleh dilakukan hari ini
Ia telah pun memaparkan bentuk vektor, kecerunan, topeng, laluan gerakan dan morphing laluan, dengan animasi @keyframes, pelonggaran setiap bingkai kunci dan penahanan.Ia melangkaui main balik juga: :hover dan :active hanya berfungsi, dan mesin keadaan tulisan tangan memacu togol, ketik dan gelagat keadaan aplikasi tanpa skrip.Ia juga mengimport fail Lottie sebenar dan SVG ke dalam adegan yang boleh dibaca yang boleh korang ubah suai di tempat kejadian, selalunya menghasilkan sentuhan yang lebih kecil daripada sumber asalnya. Dalam penyemak imbas ia berfungsi dengan baik, dengan dua pemapar di belakangnya (Canvas2D dan SVG).Adegan yang sama dijalankan pada mudah alih melalui pemapar Asli + Skia React.Masih awal: permukaan masih berkembang dan sempadan yang dibersihkanREST ialah kerja prestasi.Tetapi idea, bahawa animasi CSS boleh menjadi seni mudah alihifact, nampak menjanjikan.Cubalah
Tiada pemasangan, ia berjalan dalam penyemak imbas korang: ayarse.GitHub.io/popkorn.Edit adegan contoh secara langsung, gesa Copilot terbina dalam untuk membina satu daripada penerangan, atau masukkan Lottie atau SVG dan tonton ia menukar.Kod ini kekal di GitHub di bawah MIT.Apa yang seterusnya, dan melibatkan diri
Tumpuan jangka pendek ialah prestasi: pengoptimuman dan penanda aras yang lebih mendalam, dan pengerasan pemapar asli.Untuk jangka masa yang lebih panjang, soalan inteREST adalah tentang format itu sendiri, sejauh mana dialek CSS boleh meregang sebelum ia perlu mencipta sesuatu yang baharu, dan bahagian yang manakah yang mungkin tergolong dalam CSS sebenar suatu hari nanti.Ini ialah apa-if t
Sumber Rujukan:
- Artikel ini diterjemahkan dari Dev.to CSS
- Diterjemahkan ke Bahasa Melayu untuk haqis.com