Animasi SVG agak unik kerana terdapat tiga cara berbeza yang boleh anda lakukan untuk menganimasikannya.
1. Animasi dengan CSS @keyframes
Elemen SVG dapat disasarkan dan digayakan dengan CSS. Maksudnya, anda boleh mengaplikasikan animasi melalui @keyframes. Seperti ini:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Anda mungkin memilih menghidupkan cara ini jika…
- Animasinya cukup sederhana.
- Anda hanya perlu menghidupkan sifat yang boleh dianimasikan oleh CSS.
- Anda sudah tahu dan selesa dengan animasi CSS.
2. Menjiwai dengan SMIL
Terdapat sintaks untuk animasi yang dibina tepat ke dalam SVG. Inilah contoh yang sangat mudah:
Inilah tutorial besar mengenai semua itu SMIL.
Anda mungkin memilih menghidupkan cara ini jika…
- Anda perlu menghidupkan sifat yang tidak boleh CSS, seperti bentuknya sendiri.
- Anda memerlukan ciri khusus SMIL yang lain, seperti memulakan animasi ketika yang lain berakhir tanpa menyegerakkan jangka masa / kelewatan secara manual. Atau perkara interaksi, seperti memulakan animasi dengan satu klik.
3. Animasi dengan JavaScript
Dengan JavaScript, anda mempunyai akses kepada perkara seperti requestAnimationFrame (atau gelung lain), jadi anda boleh menghidupkan hanya dengan mengubah nilai harta tanah dengan cepat. Terdapat juga kerangka kerja di luar sana untuk bekerja dengan SVG yang biasanya mempunyai bahan animasi yang terpasang. Atau kerangka kerja animasi yang berfungsi dengan SVG. Seperti SnapSVG, GreenSock, SVG.js, atau Velocity.js.
Inilah contoh dengan SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Anda mungkin memilih menghidupkan cara ini jika…
- Anda tetap menggunakan JavaScript, mungkin animasi anda ada hubungannya dengan data yang anda terima dengan JSON atau sejenisnya.
- Bagaimanapun anda memerlukan JavaScript, kerana anda memerlukan logik atau matematik atau sesuatu yang lain yang mungkin hanya ada di sana.
- Anda berminat dengan JavaScript menyelesaikan beberapa bug untuk anda.
- Skop animasi anda agak besar / rumit dan anda memerlukan abstraksi dan organisasi yang dapat disediakan oleh JavaScript.
Demo
Lihat Pen Three Cara untuk Menganimasikan SVG oleh Chris Coyier (@chriscoyier) di CodePen.
Bukankah bagaimana anda akhirnya menggunakan SVG mempengaruhi pilihan anda?
Ia berlaku. Sekiranya anda menggunakan SVG-as- , anda tidak akan dapat menggunakan animasi CSS dari helaian gaya lain. Tetapi, anda animasi SMIL akan berfungsi, di beberapa penyemak imbas (pada masa penulisan ini, Chrome ya, Firefox no). Saya tidak akan terkejut jika CSS tertanam dalam fail SVG berfungsi atau akan berfungsi suatu hari nanti. JavaScript, mungkin tidak.
Sekiranya anda menggunakan SVG dalam gambar latar CSS, saya membayangkan kisahnya serupa seperti di atas.
Sekiranya anda menggunakan sebaris , semua kemungkinan terbuka untuk anda.
Sekiranya anda menggunakan SVG melalui objectatau iframe, anda harus memasukkan skrip / gaya tepat di SVG agar dapat berfungsi.