Una guida pratica all'animazione SVG

Qualsiasi ingegnere front-end degno del proprio sale è consapevole delle sfide che l'ecosistema frammentato di dispositivi comporta. Dimensioni dello schermo, risoluzioni e proporzioni diverse rendono difficile fornire un'esperienza coerente. Ancora di più per coloro che vogliono offrire un'esperienza pixel-perfetta.

La grafica vettoriale scalabile (SVG) aiuta a risolvere una parte di questo problema e lo fa molto bene. Sebbene abbiano i loro limiti, gli SVG possono essere molto utili in determinate occasioni e, se hai un buon team di progettazione, puoi anche creare un'esperienza visivamente più sbalorditiva senza sovraccaricare il browser Web o ostacolare i tempi di caricamento.

Negli ultimi mesi, ho lavorato a un progetto che sta facendo ampio uso di SVG e delle sue capacità di animazione ed effetti. In questo articolo, condividerò come puoi utilizzare SVG e le sue tecniche di animazione per dare nuova vita al tuo lavoro di front-end web.

Grafica vettoriale scalabile

SVG è un formato immagine basato su XML, proprio come funziona HTML. Definisce elementi diversi per una serie di forme geometriche familiari che possono essere combinate nel markup per produrre grafica bidimensionale.

La specifica SVG è uno standard aperto sviluppato dal World Wide Web Consortium (W3C) nel 1999.

Tutti i principali browser Web supportano già da tempo il rendering SVG.

Poiché le grafiche SVG sono documenti XML, i browser Web forniscono API basate su nodi DOM che possono essere utilizzate per interagire con le immagini. Parla di dare vita alle immagini!

Percorsi SVG

Se c'è un elemento sopraffatto in SVG, quello sarebbe l'elemento <path> .

L'elemento del percorso è una forma di base che può essere utilizzata per creare quasi tutte le forme 2D avanzate che puoi immaginare.

L'elemento funziona prendendo una sequenza di comandi di disegno. È molto simile al linguaggio di programmazione Logo del 1967, solo modernizzato e progettato per una grafica di fantasia. L'elemento prende questa sequenza di comandi di disegno tramite l'attributo d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Puoi pensare a una penna virtuale che disegna sullo schermo e i commenti di disegno nell'elemento del percorso controllano semplicemente la penna. Nell'esempio sopra, alla penna viene richiesto di spostarsi sulla posizione (10, 10) ( M10 10 ), di tracciare una linea su (75, 10) ( L75 10 ), di tracciare una linea su (75, 75) L75 75 e poi chiudere il sentiero tornando al punto di partenza ( Z ).

Usando altri comandi di disegno, come archi ( A ), curve di bezier quadratiche ( Q ), curve di bezier cubiche ( C ), ecc. puoi creare forme e grafici molto più complessi in SVG.

Puoi imparare molto di più sull'elemento percorso qui.

Percorsi SVG e CSS

“Okay Juan, ho capito. I percorsi sono potenti, ma come faccio ad animarli?" tu dici.

Per la nostra prima tecnica, sfrutteremo due attributi SVG: stroke-dasharray e stroke-dashoffset .

L'attributo tratto-dasharray controlla il modello di trattini e spazi vuoti utilizzati per tracciare il tracciato. Se volessi disegnare le tue linee come un gruppo di trattini e spazi vuoti invece di un tratto continuo di inchiostro, questo è l'attributo che useresti.

Poiché le immagini SVG fanno parte del DOM del browser Web e stroke-dasharray è un elemento di presentazione, l'attributo può anche essere impostato utilizzando CSS.

Allo stesso modo, anche l'attributo stroke-dashoffset (che specifica fino a che punto nel pattern di trattino deve iniziare il trattino) può essere controllato utilizzando CSS.

Questi due attributi SVG, insieme, possono essere utilizzati per animare i percorsi SVG, dando allo spettatore l'illusione che i percorsi vengano disegnati gradualmente.

Prendi questa curva di Bézier quadratica, ad esempio:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Per animare questo percorso come se fosse disegnato gradualmente e senza intoppi sullo schermo, dovremo impostare le lunghezze del trattino (e dello spazio vuoto), usando l'attributo tratto-dasharray, uguale alla lunghezza del percorso. In questo modo la lunghezza di ogni trattino e spazio nella curva tratteggiata è uguale alla lunghezza dell'intero percorso.

Successivamente, imposteremo l'offset del trattino, utilizzando l'attributo stroke-dashoffset, su 0. Questo farà apparire il percorso sullo schermo come una curva solida (stiamo essenzialmente guardando il primo trattino e abbiamo già fatto in modo che ogni trattino si estendesse per l'intero lunghezza della curva). Impostando l'offset del trattino uguale alla lunghezza della curva, ci ritroveremo con una curva invisibile (ora stiamo guardando la curva che viene renderizzata come un intero spazio vuoto, la parte che segue immediatamente un trattino).

Ora, animando la proprietà stroke-dashoffset, puoi far apparire gradualmente la curva sullo schermo.

Vedi i percorsi Pen Toptal - SVG e CSS di Toptal Blog (@toptalblog) su CodePen.

Come puoi vedere, la curva è sempre lì. Stiamo solo cambiando l'offset del trattino per far apparire la parte tratteggiata un po' alla volta.

Puoi fare un ulteriore passo avanti usando lo stesso principio ma con più percorsi:

Vedi i percorsi Pen Toptal - SVG e CSS di Toptal Blog (@toptalblog) su CodePen.

Qui hai una curva nera fissa, una rossa che si muove lungo il percorso e un'altra nera che segue quella rossa ma 40px dietro.

Stroke-dasharray e stroke-dashoffset sono due attributi molto potenti che possono essere utilizzati per applicare una pletora di animazioni ed effetti ai percorsi SVG. Puoi provare questo pratico strumento che puoi utilizzare per sperimentare i due attributi.

Animazione di oggetti lungo percorsi SVG

Con SVG e CSS, un'altra cosa interessante che puoi fare è animare oggetti o elementi seguendo un percorso.

Ci sono 2 attributi SVG che useremo per l'animazione:

• offset-path: la proprietà CSS offset-path specifica il percorso di offset in cui viene posizionato l'elemento.

• offset-distance: la proprietà CSS offset-distance specifica una posizione lungo un percorso offset.

Combinando queste due proprietà, puoi creare facilmente animazioni come questa:

Vedi i percorsi Pen Toptal - SVG e CSS di Toptal Blog (@toptalblog) su CodePen.

Come puoi vedere, abbiamo un nuovo elemento div.ball .

Questo elemento può essere qualsiasi cosa, un div, un'immagine, un testo, qualunque cosa. L'idea in questo esempio è che con l'uso di offset-path e offset-distanza puoi dare all'elemento un percorso da seguire e animare la distanza e l'elemento si sposterà attraverso il percorso.

Animazioni SVG utilizzando JavaScript

Se tutti questi non sono già abbastanza fantasiosi, puoi sempre ricorrere a JavaScript.

L'animazione di elementi SVG con JavaScript può essere molto simile all'animazione di elementi DOM. Tuttavia, con JavaScript, puoi ottenere le tecniche di animazione che abbiamo verificato sopra, ma più facilmente.

In precedenza, dovevamo codificare le lunghezze dei percorsi nel nostro CSS. Con l'aiuto della funzione JavaScript path.getTotalLength() è possibile calcolare al volo la lunghezza del percorso e utilizzarla secondo necessità. Puoi saperne di più qui.

Inoltre, sono già disponibili numerose librerie che possono rendere le animazioni SVG molto più semplici di quanto non lo siano già.

Snap.svg non solo semplifica il disegno di immagini SVG utilizzando JavaScript, ma rende l'animazione semplice come chiamare .animate({}) .

Un'altra libreria, anime.js, ti consente di fare in modo che un elemento div segua un percorso SVG con poche righe di codice.

Se stai cercando una libreria che faccia di più da sola ma renda i risultati ancora sbalorditivi, allora Vivus è quello che stai cercando. Richiede un approccio diverso, più basato sulla configurazione, all'animazione del percorso SVG. Con questa libreria, devi solo aggiungere un ID all'elemento SVG che vuoi disegnare e definire un oggetto Vivus con quell'ID. Vivus si occuperà del resto.

Ulteriori letture

Di seguito è riportato un elenco di risorse che potresti trovare utili quando si tratta di immagini SVG e le si anima:

Per approfondire l'animazione SVG, puoi leggere questo breve articolo sui tre modi per animare le immagini SVG e guardare lo screencast video di CSS Tricks.

Una cosa che questo articolo non ha trattato è l'animazione di immagini SVG con Synchronized Multimedia Integration Language (SMIL). Mentre l'utilizzo di CSV per SVG ti offre il vantaggio di lavorare con qualcosa che già conosci, SMIL porta le cose al livello successivo.

Con SMIL, puoi implementare effetti di animazione avanzati come il morphing della forma utilizzando solo SVG. Una guida breve ma efficace all'uso di SMIL per tali effetti è disponibile qui.

Anche se il supporto per SMIL è un po' spigoloso in questo momento (nessun gioco di parole).

Animazioni senza compromessi per il Web

In questo articolo, hai esaminato diversi modi per animare gli elementi SVG utilizzando CSS o HTML sui percorsi SVG.

SVG è leggero e può essere utilizzato per produrre grafica nitida indipendentemente dalle dimensioni dello schermo, dal livello di zoom e dalla risoluzione dello schermo. Con SVG, offrire un'esperienza moderna e vivida ora è più facile che mai, il tutto sfruttando i vantaggi dell'utilizzo di tecnologie Web standard.

E questo è tutto! Spero che tu abbia trovato utile questo tutorial di animazione SVG e ti sia piaciuto leggerlo.

Ulteriori letture sul blog di Toptal Engineering:

• Come avvicinarsi alle animazioni SVG nei CSS