23: Menghidupkan SVG dengan SMIL - Trik CSS

Anonim

Walaupun menganimasikan SVG dengan CSS mungkin lebih selesa untuk rata-rata orang depan, SVG mempunyai cara lain untuk membuat animasi yang dibina tepat pada sintaks SVG itu sendiri. Inilah sebenarnya yang kita bahas secara ringkas dalam video ini, tetapi jika anda mahukan panduan rujukan yang lengkap, sila lihat Panduan untuk Animasi SVG (SMIL) oleh Sara Soueidan di sini di CSS-Tricks.

SMIL bermaksud Bahasa Integrasi Multimedia yang Diselaraskan. Seperti yang saya fahami, itu adalah "perkara" untuk dirinya sendiri yang kebetulan dibina dalam SVG. Tetapi SVG mempunyai beberapa penambahan seperti SMIL sendiri. Saya hanya akan menyebutnya sebagai SMIL walaupun kadang-kadang saya yakin secara teknikal saya tidak betul.

Untuk animasi yang sangat sederhana, tidak menjadi masalah jika anda melakukannya dalam SMIL atau CSS, ia akan melakukan perkara yang sama pada tahap kesukaran yang sama. Beberapa perkara mungkin lebih mudah dalam CSS. Tetapi ada beberapa perkara di mana SMIL adalah jalan yang boleh dilalui:

  • Anda perlu menghidupkan sesuatu yang tidak dapat disentuh oleh CSS. Seperti bentuk poligon atau jalan.
  • Anda mahu menggunakan acara untuk mempengaruhi animasi, seperti clickatau mouseoveratau sesuatu.
  • Anda mahu melakukan animasi tambahan, seperti, bernyawa dari mana sahaja anda berada sekarang x piksel lain.
  • Anda ingin mempunyai animasi yang berkaitan secara langsung dengan animasi lain, seperti ketika animasi ini selesai memulakan animasi seterusnya ini (tanpa memanipulasi durasi secara manual).
  • Saya pasti ada banyak lagi.

Sintaksnya terasa menakutkan pada mulanya, tetapi saya sangat mudah berjanji. Inilah contoh asas:

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

Perkara "bentuk morfing" sangat unik dengan SMIL, jadi inilah contoh yang lebih baik daripada yang pelik yang kami lakukan dalam video:

Lihat Butang Pen Shape Morph oleh Chris Coyier (@chriscoyier) di CodePen.

Dalam demo itu, acara ditangani oleh JavaScript dan bukannya SMIL. Hanya senang mengetahui bahawa anda juga boleh melakukannya. Pencetus acara SMIL memang hebat tetapi perkara yang perlu diklik mestilah dalam SVG itu dan bukannya di tempat lain di DOM.