Una guida per principianti all'animazione SVG con CSS

Scalable Vector Graphics (SVG) sono più di semplici file di immagine. In quanto applicazione XML, gli SVG contengono markup che assomigliano e funzionano in modo molto simile all'HTML. Puoi anche usarli insieme al codice CSS e JavaScript. Ciò rende possibile animare i file SVG, creando immagini complesse che funzionano bene per il web design e altri ambienti dinamici.

Ma come si crea un'animazione SVG? Inizia con una forma SVG, animala usando CSS e sfrutta questi principi per usare l'animazione nel tuo lavoro.

Animazione di SVG con HTML e CSS

Sebbene sia possibile utilizzare JavaScript per animare gli SVG in modo programmatico, CSS ora ha un buon supporto anche per le animazioni. Puoi trovare tutto il codice di esempio su CodePen per questo progetto.

Creazione di un'immagine SVG all'interno di HTML

Il primo passo in questo processo è costruire l'immagine SVG con cui lavorerai. Puoi trovare il markup SVG nel pannello HTML su CodePen.

Struttura SVG

Sebbene gli SVG condividano un formato simile all'HTML, i tag che usi per crearli sono diversi. Un SVG ha tag di apertura e chiusura () che può contenere una varietà di proprietà diverse. Nel nostro caso, stiamo usando

id e viewBox proprietà. La proprietà id funziona come qualsiasi altro ID HTML, fornendoti un identificatore univoco da utilizzare nel tuo CSS/JS. La proprietà viewBox imposta la dimensione del nostro SVG.

<!-- SVG con una dimensione reattiva -->
<id svg="MUOSVGAnimazione" viewBox="0 0 800 600">
<!-- Contenuto SVG -->
</svg>

È invece possibile utilizzare le proprietà di larghezza e altezza, come illustrato nell'esempio seguente. Tuttavia, viewBox crea un SVG reattivo che corrisponderà alle dimensioni del viewport senza interromperne le proporzioni.

 SVG con una dimensione statica 
<id svg="MUOSVGAnimazione" larghezza="800" altezza="600">
<!-- Contenuto SVG -->
</svg>

Forme SVG

Puoi creare immagini dettagliate con SVG, con una serie di diversi strumenti di forma a tua disposizione. Questo esempio SVG utilizza tre delle forme disponibili, ma ce ne sono molte altre. Ciascuna delle forme in questo esempio ha un ID univoco che le animazioni CSS possono utilizzare in seguito.

• SVG Ellisse: questo è uno strumento cerchio/ovale. Specifica le proprietà per il raggio dell'asse y/x (rx/ry), il colore di riempimento e la larghezza del tratto. È importante ricordare che il raggio che scegli con questo strumento sarà la metà del diametro della forma.

<ellisse id="cerchio" rx="100" ry="100" riempire="#ffed00" larghezza del tratto="0"/>

• Rett. SVG: lo strumento Rett. SVG crea un quadrato o un rettangolo. Questo ha proprietà per larghezza/altezza, una trasformazione, colore di riempimento e larghezza del tratto.

<id retto="quadrato" larghezza="200" altezza="200" trasformare="tradurre (300 200)" riempire="#05f"
 larghezza del tratto="0"/>

• Poligono SVG: usa un poligono SVG per impostare un numero specifico di punti e creare forme arbitrarie di dimensioni diverse. Il poligono nell'esempio è a tre lati, il che lo rende un triangolo e puoi vedere la posizione di ciascun punto tracciata nelle sue proprietà. Insieme a questo, abbiamo proprietà per la posizione, il colore di riempimento e la larghezza del tratto del triangolo.

<ID poligono="triangolo" punti="15,-97 115,102 -84,102 15,-97"
 trasformare="tradurre (0,0)" riempire="#f00" larghezza del tratto="0"/>

Una volta che l'animazione è a posto, le forme si allineeranno una accanto all'altra.

Queste tre forme SVG sono tra le più comuni, ma ce ne sono altre tra cui scegliere. È possibile utilizzare le seguenti forme quando lavorare con un'animazione SVG:

• Cerchio SVG: questa forma è simile a un'ellisse, ma ha sempre raggi X e Y uguali.
• Linea SVG: una linea SVG è un singolo segmento di linea con due punti, uno a ciascuna estremità.
• Polilinea SVG: le polilinee sono come le linee di base, solo che possono avere più di due punti.
• Poligono SVG: i poligoni SVG sono come rettangoli, solo che possono avere più di quattro punti, rendendo possibili forme complesse.
• Percorso SVG: i percorsi SVG funzionano in modo simile allo strumento penna in Adobe Photoshop. Le linee possono connettersi come una polilinea/poligono, ma possono anche avere delle curve applicate.

Come animare SVG con CSS

Ora che hai alcune forme all'interno del tuo SVG, è tempo di passare all'animazione CSS. Ognuna delle forme ha un'animazione diversa per dimostrare alcune delle opzioni che hai, ma ce ne sono molte altre da esplorare con i tuoi progetti. Il cerchio si sposta sullo schermo, gli angoli del quadrato diventano rotondi e il triangolo ruota. Tutti questi usano Fotogrammi chiave CSS per creare animazioni fluide.

Spostare il cerchio usando Trasforma e trasla

Il cerchio nell'esempio SVG si sposta dalla parte inferiore alla parte superiore dello schermo durante il ciclo di animazione. Devi assegnare un'animazione al cerchio prima che possa muoversi, tramite una proprietà CSS:

#cerchio {
 animazione: circle_anim 2000ms lineare infinito normale avanti
}

La prima parola nel valore, cerchio_anim, è un nome per l'animazione. Funziona per due secondi (2000 ms). Ha un lineare curva che mantiene la sua velocità costante ed è impostata per eseguire un infinito numero di volte nel avanti direzione. Puoi utilizzare i fotogrammi chiave per definire le singole fasi dell'animazione:

@fotogrammi chiave cerchio_anim {
 0% { trasformare: tradurre(155px, 305px) }
 45% { trasformare: tradurre(155px, -123px) }
 50% { trasformare: tradurre(-123px, -123px) }
 55% { trasformare: tradurre(-123px, 728px) }
 60% { trasformare: tradurre(155px, 728px) }
 100% { trasformare: tradurre(155px, 305px) }
}

Ci sono sei fotogrammi chiave in questa animazione, quindi il cerchio si sposterà in sei posizioni diverse in ogni ciclo. Il trasformare: tradurre la proprietà imposta la posizione del cerchio in ogni fase. Allo 0% il cerchio si trova al centro dello schermo e si sposta in alto e fuori dalla vista del 45%. Del 50% si è spostato a sinistra dello schermo prima di spostarsi al di sotto del viewport al 55%. Il cerchio torna alla sua posizione orizzontale del 60% e l'animazione è completa al 100% con il cerchio al centro dello schermo.

Anima la proprietà del raggio di confine del quadrato

Il quadrato nell'esempio offre un buon riferimento per le animazioni generali delle proprietà. Se conosci la sintassi corretta da utilizzare, puoi animare qualsiasi proprietà CSS. La proprietà del raggio di confine ne è una buona dimostrazione. Il quadrato ha angoli acuti che si trasformano in angoli arrotondati e poi di nuovo in angoli quadrati.

#quadrato { animazione: quadrato_anim 2000 ms facilità-in-uscita infiniti normali avanti }

L'animazione quadrata si chiama square_anim e ha un tempo di esecuzione di due secondi. Il facilità d'ingresso curva rende l'animazione più lenta all'inizio e alla fine, creando un effetto uniforme.

@fotogrammi chiave quadrato_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40px; ry: 40px }
 55% { rx: 40px; ry: 40px }
 100% { rx: 0px; ry: 0px }
}

Come puoi vedere, questa animazione ha quattro fotogrammi chiave. Il raggio di confine X e Y cambia da 0px a 40px tra lo 0% e il 45%, fermandosi a 40px fino al 55%. Quindi torna a 0px per ogni raggio quando l'animazione raggiunge il 100%.

Ruota il triangolo SVG con Trasforma

L'animazione SVG finale nell'esempio è la più semplice, con il triangolo che ruota attorno al suo punto centrale. La forma compie un giro completo ogni due secondi e continua a correre all'infinito. Ha una curva di allentamento che provoca un rallentamento dell'animazione alla fine. L'animazione si chiama triangolo_anim.

#triangolo { animazione: triangolo_anim 2000 ms allentamento in avanti normale infinito }

Questa animazione ha due fotogrammi chiave, uno allo 0% e l'altro al 100%. La proprietà Trasforma rotazione trasforma il triangolo da 0 gradi allo 0% a 360 gradi al 100%, creando un giro completo.

@fotogrammi chiave triangolo_anim {
 0% { trasformare: tradurre(644px, 297px) ruotare(0 gradi) }
 100% { trasformare: tradurre(644px, 297px) ruotare(360 gradi) }
}

Come animare altre proprietà

Le tre animazioni descritte sopra sono un buon punto di partenza quando si lavora con gli SVG, ma probabilmente vorrai spingerlo oltre. Puoi utilizzare la regola di animazione CSS per regolare quasi tutti i valori di proprietà che puoi assegnare al tuo SVG. Ciò include valori di base, come ridimensionamento e posizionamento, nonché valori più avanzati, come bordi, ombre e metodi di fusione.

In rari casi in cui CSS non può fare il lavoro, puoi utilizzare il codice JavaScript per animare le immagini SVG. Puoi trovare un sacco di guide per aiutarti in questo una volta che ti senti pronto per fare il passo successivo con i tuoi SVG.

Creare le tue animazioni SVG

Che tu sia un web designer, uno sviluppatore di software o semplicemente una persona creativa, le animazioni SVG possono essere divertenti e soddisfacenti da realizzare. Puoi trovare molte risorse sul Web che possono aiutarti con l'animazione basata sul Web, una volta che hai dimestichezza con le basi.

10 modelli di sfondo CSS che puoi utilizzare sul tuo sito web

Leggi Avanti