Meneroka CSS Paint API: Animasi Blob

Artikel ini menyelidiki untuk mewujudkan animasi gumpalan yang menawan menggunakan CSS Paint API. Walaupun secara tradisinya dicapai dengan SVG, API Paint menawarkan alternatif berasaskan CSS yang kuat, walaupun kini terhad kepada Chrome dan Edge.

Ini adalah bahagian dua siri:

• Bahagian 1: Kesan Pemecahan Imej
• Bahagian 2: Animasi Blob (artikel ini)
• Bahagian 3: Sempadan Poligon
• Bahagian 4: Bentuk Bulat

Mari buat gumpalan. Memahami<canvas></canvas> Pendekatan pertama menjelaskan prosesnya:

Gumpalan pada dasarnya adalah bulatan yang terdistorsi. Kami mendefinisikan 'n' mata di sekitar bulatan. Menggunakan trigonometri, kami mengira koordinat setiap titik (titik hijau dalam ilustrasi). Kurva bézier kubik menyambungkan titik ini, memerlukan titik permulaan, titik kawalan, dan titik akhir (titik merah). Titik merah adalah titik tengah antara titik hijau.

Dengan menyesuaikan titik kawalan (titik hijau), kami membentuk gumpalan. Mengimbangi setiap titik secara rawak ke arah pusat mencipta kesan gumpalan.

Bentuk ini kemudian menjadi topeng untuk imej menggunakan CSS Paint API. Unsur -unsur persegi (lebar sama dengan ketinggian) adalah ideal, dengan radius menjadi separuh lebar/ketinggian. Pembolehubah CSS (n) mengawal kiraan titik.

Animasi gumpalan melibatkan kedudukan titik peralihan yang lancar. Peralihan animasi mudah dari bulatan ke gumpalan dengan mengubah kedudukan satu titik. Pembolehubah CSS ( --b ) dengan peralihan digunakan. Pada hover, --b berubah, menggerakkan titik dan mencipta animasi. Memperluas ini ke pelbagai mata (contohnya, contohnya) mencipta animasi yang lebih kompleks.

Memperkenalkan Rawak: Daripada pergerakan titik tetap, offset rawak membuat animasi dinamik. Pembolehubah ( T ) bertindak sebagai suis boolean antara konfigurasi seragam dan rawak. Fungsi random() tersuai dengan benih yang dikawal memastikan urutan rawak yang konsisten.

Pergerakan titik mengawal: Kita boleh memanipulasi koordinat X dan Y secara bebas untuk animasi yang pelbagai. Sebagai contoh, menetapkan satu koordinat ke sifar mewujudkan pergerakan satu paksi (mendatar atau menegak). Pergerakan arah (kiri atau kanan) memerlukan titik pengelompokan berdasarkan sudut mereka dan menggunakan tanda -tanda yang berbeza untuk offset mereka. Melaraskan saiz bulatan menghalang mata daripada melebihi kawasan topeng. Pembungkus dengan margin negatif memastikan kawasan hover sepadan dengan gumpalan yang kelihatan.

Menggabungkan animasi: Keyframes dan fungsi padu-bezier () meningkatkan animasi. Kurva sinusoidal menghasilkan kesan goyah. Transformasi menambah kesan gelongsor.

Pergerakan Pekeliling: Mata mengorbit kedudukan awal mereka, mewujudkan animasi berterusan. Radius orbit maksimum menghalang pertindihan.

Pergerakan lingkaran: Menggabungkan pergerakan pekeliling dan pusat penukaran mewujudkan animasi lingkaran. Dua pembolehubah animasi ( B dan Bo ) mengawal pergerakan orbit dan titik masing -masing.

Ringkasan:

• N: Bilangan mata (kawalan terperinci).
• T: jenis pergerakan (seragam atau rawak).
• Benih: Untuk konfigurasi rawak.
• NA: Sifat pergerakan (pusat-penukaran, satu paksi, pekeliling, lingkaran, dan lain-lain).
• B (dan BO): Pembolehubah animasi (s).
• V: Nilai maksimum B (Kawalan Bentuk Kawasan).

Struktur kod adalah mudah: Parameter kawalan pembolehubah CSS, dan fungsi JavaScript ( Fx , Fy , A ) Tentukan logik animasi. CSS menggunakan topeng dan menghidupkan pembolehubah B

Ini menyimpulkan penerokaan animasi gumpalan dengan CSS Paint API. Eksperimen dengan pembolehubah CSS untuk menghasilkan variasi yang tidak terkira banyaknya.

Atas ialah kandungan terperinci Meneroka CSS Paint API: Animasi Blob. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!