23: Animasi SVG dengan SMIL - Trik CSS

Anonim

Meskipun menganimasikan SVG dengan CSS mungkin lebih nyaman untuk orang front-end pada umumnya, SVG memiliki cara lain untuk melakukan animasi yang dibangun langsung ke dalam sintaks SVG itu sendiri. Inilah yang kami bahas secara singkat dalam video ini, tetapi jika Anda menginginkan panduan referensi lengkap, lihat Panduan Animasi SVG (SMIL) oleh Sara Soueidan di sini di CSS-Tricks.

SMIL adalah singkatan dari Synchronized Multimedia Integration Language. Seperti yang saya pahami, itu adalah "sesuatu" yang kebetulan dibangun ke dalam SVG. Tetapi SVG memiliki beberapa tambahan seperti SMIL sendiri. Saya hanya akan menyebut semuanya sebagai SMIL meskipun saya yakin saya secara teknis terkadang salah.

Untuk animasi yang sangat sederhana, tidak masalah jika Anda melakukannya di SMIL atau CSS, itu akan melakukan hal yang sama pada tingkat kesulitan yang sama. Beberapa hal bahkan mungkin lebih mudah di CSS. Tapi inilah beberapa hal di mana SMIL adalah jalan yang harus ditempuh:

  • Anda perlu menganimasikan sesuatu yang tidak dapat disentuh CSS. Seperti bentuk poligon atau jalur.
  • Anda ingin menggunakan acara untuk mempengaruhi animasi, seperti clickatau mouseoveratau sesuatu.
  • Anda ingin melakukan animasi tambahan, seperti, menganimasikan dari mana pun Anda berada sekarang x piksel lainnya.
  • Anda ingin memiliki animasi yang berhubungan langsung dengan animasi lain, seperti, saat animasi ini selesai, mulailah animasi berikutnya ini (tanpa memanipulasi durasi secara manual).
  • Saya yakin masih ada lagi.

Sintaksnya terasa mengintimidasi pada awalnya, tetapi sangat mudah saya berjanji. Inilah contoh dasarnya:

Lihat Pen jAipI oleh Chris Coyier (@chriscoyier) di CodePen.

Hal "perubahan bentuk" benar-benar sangat unik dengan SMIL, jadi inilah contoh yang lebih baik daripada yang aneh yang kami lakukan di video:

Lihat Tombol Morf Bentuk Pena oleh Chris Coyier (@chriscoyier) di CodePen.

Dalam demo itu, acara ditangani oleh JavaScript, bukan oleh SMIL. Senang mengetahui Anda bisa melakukannya juga. Pemicu peristiwa SMIL memang keren tetapi hal yang perlu diklik harus ada di SVG itu daripada di mana pun di DOM.