Bingkai dengan tutorial animasi bingkai dengan CSS dan JavaScript

Tutorial ini meneroka pelbagai kaedah untuk membuat animasi bingkai-bingkai yang lancar, pelaku, dan dikekalkan menggunakan HTML, CSS, dan JavaScript. Kami akan membina animasi mata berkedip, secara progresif menyempurnakan pendekatan kami untuk mencapai hasil yang optimum di seluruh pelayar dan peranti.

Konsep Utama:

• teknik animasi bingkai-bingkai menggunakan CSS dan JavaScript menawarkan pendekatan yang pelbagai, masing-masing dengan perdagangan.
• skalabilitas dan responsif SVG menjadikannya lebih tinggi daripada GIF, terutamanya untuk animasi kompleks atau interaktif.
• animasi berasaskan sprite dan kerangka utama CSS meminimumkan permintaan HTTP dan memperbaiki rendering.
• CSS mengubah sifat, terutamanya dengan pecutan perkakasan (translate3d), mengoptimumkan prestasi dengan mengurangkan pengecutan dan reflows.
• memilih teknik yang betul bergantung kepada skalabilitas, responsif, prestasi, dan keperluan pemeliharaan.

Apakah animasi bingkai-by-frame?

animasi bingkai-by-frame, seperti yang ditakrifkan oleh Adobe, melibatkan perubahan kandungan panggung dalam setiap bingkai. Ia sesuai untuk animasi kompleks di mana setiap bingkai adalah unik. Pada asasnya, urutan imej mencipta ilusi pergerakan.

Tutorial ini menggunakan imej SVG untuk berskala mereka. Alternatif seperti PNG, JPEG, dan GIF dibincangkan kemudian. Kami akan menggunakan jQuery dan menganggap autoprefixer dikonfigurasi.

Kaedah:

1. Menukar sumber imej: Kaedah mudah ini melibatkan secara dinamik mengubah atribut src elemen <img alt="Bingkai dengan tutorial animasi bingkai dengan CSS dan JavaScript" >. requestAnimationFrame digunakan untuk animasi yang lebih lancar, tetapi pramuat imej adalah penting untuk mengelakkan jank awal. Preloading dicapai dengan memasuki Divs Tersembunyi dengan imej sebagai imej latar belakang.

   • Pro: Deklaratif, imej tetap di tempat.
   • cons: Permintaan HTTP berganda boleh melambatkan beban halaman awal, potensi untuk animasi janky di mudah alih kerana mengecat semula.

2. Mengubah kelegapan imej: Pendekatan ini menghindari pengecatan semula dengan mengubah kelegapan imej dan bukannya sumber. Semua imej dimuatkan, meningkatkan prestasi tetapi masih memerlukan banyak beban imej.

   • pro: prestasi rendering yang lebih baik berbanding dengan kaedah 1.
   • cons: Masih memerlukan banyak beban imej, berpotensi memberi kesan kepada beban halaman awal.

3. Menukar Kedudukan Sprite: Ini menggunakan lembaran sprite CSS -imej tunggal yang mengandungi semua bingkai animasi. Animasi CSS Tukar background-position untuk membuat animasi.

   • pro: permintaan http tunggal, tidak ada javascript yang diperlukan.
   • cons: Repaints boleh menyebabkan jank pada mudah alih, potensi untuk goyah imej kerana rendering sub-pixel.

4. bergerak sprite dengan transform: Ini mengoptimumkan kaedah 3 dengan menggunakan transform: translateX bukan background-position. Ini meminimumkan pengecutan dan reflows. Kejatuhan diperlukan untuk versi IE yang lebih tua yang tidak menyokong nilai peratusan dalam animasi translateX. transform: translate3d(0, 0, 0) digunakan untuk pecutan perkakasan.

   • Pro: Permintaan HTTP tunggal, animasi lancar di telefon bimbit kerana pengecualian yang diminimumkan.
   • cons: iaitu kejatuhan yang diperlukan.

inline svg: inlining svg dan bukannya menggunakan fail luaran boleh meningkatkan masa beban halaman awal, terutama untuk halaman dengan kebarangkalian revisit yang rendah.

Perbandingan prestasi: Ujian prestasi (mis., Menggunakan JSPERF) menunjukkan bahawa kaedah transformasi sprite (Kaedah 4) umumnya menawarkan prestasi rendering terbaik.

Alternatif:

• gif: Sesuai jika skalabiliti tidak kritikal, tetapi tidak mempunyai kawalan ke atas aliran animasi dan boleh menjadi besar.
• kanvas: Cemerlang untuk prestasi dengan pelbagai objek animasi pada skrin kecil, tetapi memerlukan pengetahuan API kanvas dan kekurangan sokongan acara DOM.

Kesimpulan:

Kaedah terbaik bergantung kepada keperluan projek. Mengutamakan SVG untuk berskala, gunakan sifat transformasi untuk prestasi, dan pertimbangkan sprite untuk masa beban awal yang optimum. Pilih pendekatan yang terbaik mengimbangi prestasi, mengekalkan, dan kebiasaan pemaju.

(URL imej tidak termasuk dalam output kerana ia tidak disediakan dalam format yang mudah digunakan. Gantikan ruang letak dengan URL imej sebenar anda.)

Atas ialah kandungan terperinci Bingkai dengan tutorial animasi bingkai dengan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!