23: Animazione di SVG con SMIL - Trucchi CSS

Anonim

Anche se l'animazione di SVG con CSS potrebbe essere più comoda per la persona media front-end, SVG ha un altro modo per eseguire l'animazione incorporata direttamente nella sintassi SVG stessa. Questo è esattamente ciò che trattiamo in breve in questo video, ma se vuoi una guida di riferimento completa, dai un'occhiata a A Guide to SVG Animations (SMIL) di Sara Soueidan proprio qui su CSS-Tricks.

SMIL è l'acronimo di Synchronized Multimedia Integration Language. A quanto ho capito, questa è una "cosa" tutta per sé che sembra essere incorporata in SVG. Ma SVG ha alcune delle sue aggiunte simili a SMIL. Mi riferirò a tutto come SMIL anche se sono sicuro di essere tecnicamente sbagliato a volte.

Per animazioni molto semplici, non importa se lo fai in SMIL o CSS, farà la stessa cosa all'incirca allo stesso livello di difficoltà. Alcune cose potrebbero anche essere più facili in CSS. Ma qui ci sono alcune cose in cui SMIL è la strada da percorrere:

  • Devi animare qualcosa che i CSS non possono toccare. Come la forma di un poligono o di un percorso.
  • Si desidera utilizzare gli eventi di influenzare l'animazione, come un clicko mouseovero qualcosa del genere.
  • Vuoi fare animazioni additive, come animare da ovunque ti trovi ora un altro x pixel.
  • Vuoi avere animazioni che si riferiscono direttamente ad altre animazioni, ad esempio, quando questa animazione finisce, inizia la prossima animazione (senza manipolare manualmente le durate).
  • Sono sicuro che ce ne sono di più.

La sintassi all'inizio sembra intimidatoria, ma è davvero abbastanza facile, lo prometto. Ecco un esempio di base:

Guarda Pen jAipI di Chris Coyier (@chriscoyier) su CodePen.

La cosa "shape morphing" è davvero unica con SMIL, quindi ecco un esempio migliore di quello strano che abbiamo fatto nel video:

Vedi il pulsante Morph forma penna di Chris Coyier (@chriscoyier) su CodePen.

In quella demo, gli eventi sono gestiti da JavaScript invece che da SMIL. È solo bello sapere che puoi farlo anche tu. I trigger di eventi SMIL sono interessanti, ma la cosa che deve essere cliccata deve essere in quell'SVG piuttosto che in qualsiasi altra parte del DOM.