SVG animasi agak unik karena ada tiga cara berbeda yang dapat Anda lakukan untuk melakukan animasi.
1. Menganimasikan dengan CSS @keyframes
Elemen SVG dapat ditargetkan dan ditata dengan CSS. Artinya, Anda dapat menerapkan animasi melalui @keyframes. Seperti ini:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Anda dapat memilih menganimasikan seperti ini jika…
- Animasinya cukup sederhana.
- Anda hanya perlu menganimasikan properti yang dapat dianimasikan CSS.
- Anda sudah tahu dan nyaman dengan animasi CSS.
2. Animasi dengan SMIL
Ada sintaks untuk animasi yang dibangun langsung ke dalam SVG. Inilah contoh yang sangat sederhana:
Berikut tutorial besar tentang semua itu SMIL.
Anda dapat memilih menganimasikan seperti ini jika…
- Anda perlu menganimasikan properti yang tidak bisa dilakukan CSS, seperti bentuk itu sendiri.
- Anda memerlukan fitur khusus SMIL lainnya, seperti memulai animasi saat yang lain berakhir tanpa menyinkronkan durasi / penundaan secara manual. Atau interaksi, seperti memulai animasi dengan sekali klik.
3. Membuat animasi dengan JavaScript
Dengan JavaScript, Anda memiliki akses ke hal-hal seperti requestAnimationFrame (atau loop lainnya), sehingga Anda dapat menganimasikan hanya dengan mengubah nilai properti dengan cepat. Ada juga kerangka kerja di luar sana untuk bekerja dengan SVG yang biasanya memiliki barang animasi bawaan. Atau kerangka kerja animasi yang bekerja 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 dapat memilih menganimasikan seperti ini jika…
- Anda tetap bekerja dalam JavaScript, mungkin animasi Anda ada hubungannya dengan data yang Anda terima dengan JSON atau sejenisnya.
- Anda tetap membutuhkan JavaScript, karena Anda memerlukan logika atau matematika atau hal lain yang hanya mungkin ada di sana.
- Anda tertarik dengan JavaScript yang memecahkan beberapa bug untuk Anda.
- Cakupan animasi Anda agak besar / rumit dan Anda memerlukan abstraksi dan organisasi yang dapat disediakan JavaScript.
Demo
Lihat Tiga Cara Pena untuk Menganimasikan SVG oleh Chris Coyier (@chriscoyier) di CodePen.
Bukankah bagaimana Anda pada akhirnya menggunakan SVG memengaruhi pilihan Anda?
Memang. Jika Anda menggunakan SVG-as- , Anda tidak akan dapat menggunakan animasi CSS dari lembar gaya lain. Tapi, animasi SMIL Anda akan berfungsi, di beberapa browser (pada saat artikel ini ditulis, Chrome ya, Firefox tidak). Saya tidak akan terkejut jika CSS yang disematkan dalam file SVG berfungsi atau akan berfungsi suatu hari nanti. JavaScript, mungkin tidak.
Jika Anda menggunakan SVG dalam gambar latar belakang CSS, saya membayangkan itu adalah cerita yang mirip seperti di atas.
Jika Anda menggunakan inline , semua kemungkinan terbuka untuk Anda.
Jika Anda menggunakan SVG melalui objectatau iframe, Anda perlu menyematkan skrip / gaya langsung di SVG agar berfungsi.