Share
Oggi ti illustreremo le basi dell'utilizzo animateTransform per generare animazioni in linea con SVG (grafica vettoriale scalabile).
Se sei nuovo di zecca per SVG ti consiglio di provare Guida introduttiva con Scalable Vector Graphics (SVG) per darti la giusta velocità.
Le tecniche che imparerai ti consentiranno di creare sofisticate animazioni di icone e immagini senza un singolo GIF, JPEG o PNG, con zero JavaScript e senza il minimo sussurro di Flash.
Le animazioni che creerai saranno facili da modificare in seguito perché sono codice puro e i risultati richiederanno solo un paio di KB di preziosa larghezza di banda quando vengono visualizzati.
Per animare le forme SVG avrai prima bisogno della possibilità di crearle. Ho trovato il modo più semplice per creare SVG è quello di utilizzare Sketch da Bohemian Coding. Se non possiedi Sketch, puoi ottenere una prova gratuita di 30 giorni per gli scopi di questo tutorial.
Manterremo il codice SVG, quindi dopo aver disegnato una forma in Sketch, crea una sezione attorno ad essa ed esporta quella porzione come file SVG.
Sarai quindi in grado di aprire il tuo file esportato in un editor di codice (come Sublime Text) e copiare il codice SVG dall'interno. Tutto ciò di cui hai bisogno è il codice dall'apertura tag alla chiusura etichetta.
Ad esempio, Sketch genera il seguente codice SVG per il rettangolo blu nella foto sopra:
Per rendere visivamente più semplice il funzionamento del codice, apporteremo un paio di piccole modifiche al codice.
Impostare il svg elementi larghezza e altezza a 100% ed elimina il viewBox ambientazione. Elimina anche il Generatore commento, e il titolo, disc, defs e g elementi.
Dovresti finire con qualcosa del genere:
Rilascia quel codice in un documento HTML e, se visualizzato nel browser, dovresti vedere lo stesso rettangolo blu sulla tua pagina come hai visto in Sketch:
Nota: L'immagine sopra include un asse X e Y sullo sfondo, poiché è necessario comprenderli per creare le animazioni. Imparerai perché a breve.
La risposta breve è, il animateTransform elemento genera animazioni impostando le proprietà di trasformazione sulla forma SVG a cui è applicata.
Detto questo, la seguente domanda logica è:
Aggiunta trasformare le impostazioni di una forma consentono di modificare l'aspetto di quella forma nello spazio 2D. Esistono cinque diversi tipi di trasformazione che puoi eseguire:
Accentsconagua
tradurrescalaruotareskewXskewYIl animateTransform l'attributo ti consente di animare tra diversi stati di trasformazione, quindi prima di iniziare l'animazione è importante capire come funzionano effettivamente le trasformazioni.
Poiché le trasformazioni operano nello spazio 2D, le loro impostazioni si riferiscono tutte alle coordinate X e Y tracciate su un asse X / Y, come si è visto nella foto dietro il nostro rettangolo blu in precedenza.
X asse è la linea orizzontale nello spazio 2D e il Y l'asse è la linea verticale. Per impostazione predefinita, ogni forma inizia in una posizione di 0 su entrambi i X e Y asse.0 posizione sul X asse, i valori positivi corrispondono con lo spostamento verso destra e i valori negativi corrispondono con lo spostamento verso sinistra.0 posizione sul Y asse, i valori positivi corrispondono con lo spostamento verso il basso e i valori negativi corrispondono con lo spostamento verso l'alto. Se questo non ha ancora senso, non ti preoccupare, poiché diventerà molto più chiaro quando vedrai gli esempi di ogni tipo di trasformazione di seguito.
Non preoccuparti nemmeno del codice per queste trasformazioni, poiché lo copriremo quando passeremo alla creazione di animazioni. Per cominciare voglio solo che tu dia l'essenziale su ciò che effettivamente fanno i cinque tipi di trasformazione.
Questo sposta la posizione della forma sull'asse X (orizzontale) e sull'asse Y (verticale).
Ad esempio, ecco il nostro rettangolo blu con tradurre valori di 150 sul X asse (orizzontale) e 20 sul Y (Asse verticale:
Ricorda dalla sezione sopra che i valori positivi su X l'asse corrisponde con lo spostamento verso destra e i valori positivi su Y l'asse corrisponde con lo spostamento verso il basso.
Impostando il tradurre valore per X a positivo 150, il nostro rettangolo si è spostato a destra di 150 pixel. Impostazione del valore per Y a positivo 20 ha spostato il nostro rettangolo di 20 pixel verso il basso.
Questo moltiplica la dimensione complessiva della forma sull'asse X (larghezza) e sull'asse Y (altezza).
Le impostazioni della scala funzionano come moltiplicatori delle dimensioni originali della forma. Ad esempio, se impostiamo il X scala a 3 renderebbe la forma tre volte più ampia. Se impostiamo il Y scala a 1.25 renderebbe la forma una volta e un quarto più alta, in questo modo:
Tradotto anche (150, 20)Questo ruota la forma intorno a un punto dato di gradi.
La rotazione funziona impostando il numero di gradi in base al quale si desidera ruotare la forma. Ad esempio, ecco il nostro rettangolo ruotato di 45 gradi:
Tradotto anche (150, 20)Di default la forma ruota intorno al suo angolo in alto a sinistra, ma puoi anche farla ruotare attorno ad un altro punto. Vedremo come è fatto più avanti nel tutorial.
Ciò altera la forma lungo l'asse X (orizzontale).
L'inclinazione lungo l'asse X funziona anche in gradi. Ad esempio, nell'immagine sottostante il nostro rettangolo è inclinato di 20 gradi lungo l'asse X:
Tradotto anche (150, 20)Ciò altera la forma lungo l'asse Y (verticale) di gradi.
skewY funziona esattamente allo stesso modo di skewX, solo la trasformazione avviene verticalmente lungo l'asse Y in questo modo:
Tradotto anche (150, 20)Ora che sai che cosa effettivamente fanno le trasformazioni, puoi iniziare a creare animazioni tra diversi stati di trasformazione. Il processo di base ha tre passaggi:
a partire dal stato.a stato.a partire dal e il astato.Questo è meglio compreso attraverso un esempio pratico, quindi iniziamo animando a tradurre trasformazione.
Ricorderai che prima abbiamo iniziato con il nostro rettangolo blu nella posizione predefinita di 0 0, vale a dire. 0 sul X asse e 0 sul Y asse. Stabiliremo questa posizione come nostra a partire dal stato.
Abbiamo quindi esaminato un esempio dello stesso rettangolo blu con le impostazioni di traduzione di 150 20 applicato, cioè. 150 sul X asse e 20 sul Y asse. Stabiliremo questa posizione come nostra a stato.
utilizzando animateTransform possiamo fare il rettangolo scivolare senza intoppi tra i nostri a partire dal e il nostro a dichiara per un periodo di due secondi.
La forma SVG, in questo caso il rettangolo, dovrà avere entrambi i tag di apertura e di chiusura, ad es.
Il animateTransform l'attributo deve essere inserito tra questi tag in questo modo:
Dai un'occhiata alle proprietà che sono state impostate all'interno del animateTransform etichetta. Questi sono ciò che controlla il modo in cui viene eseguita l'animazione.
Abbiamo impostato genere tradurre, il che significa che applicheremo a tradurre tipo di trasformazione. Come previsto, abbiamo impostato il nostro 0 0 posizione nel a partire dal stato, e il nostro 150 20 posizione nel a stato.
Il valore per inizio è impostato per 0s, il che significa che l'animazione inizierà a zero secondi dopo il caricamento, e dur è impostato per 2s, il che significa che l'animazione verrà eseguita per un periodo di due secondi. Infine, abbiamo incluso repeatCount impostato indefinito il che significa che l'animazione verrà riprodotta in loop.
Questo ci dà la seguente animazione:
Il processo è esattamente lo stesso per la rotazione di tutti e quattro gli altri tipi di trasformazioni. Dopo aver impostato il genere Valorizza qualsiasi tipo di trasformazione desideri, inserisci valori per il tuo a partire dal e a stati di trasformazione.
Ad esempio, possiamo usare quanto segue animateTransform impostazioni per ridimensionare il nostro rettangolo fino alla dimensione che hai visto nella sezione precedente sulla trasformazione della scala:
Poiché le impostazioni di trasformazione della scala moltiplicano le dimensioni originali della forma, iniziamo con un valore di 1 1 sul a partire dal ambientazione. In questo modo si imposta la sua dimensione originale con una moltiplicazione di 1.
Nostro a impostazione di 3 1.25 animerà la nostra trasformazione di scala fino a tre volte la larghezza originale sull'asse X e uno e un quarto l'altezza originale sull'asse Y.
Nota: Troverai le tue animazioni effettive nel browser più scorrevoli rispetto alla GIF di cattura dello schermo che vedi sopra.
Possiamo anche combinare le due animazioni che abbiamo creato finora, sia per tradurre che per ridimensionare allo stesso tempo. Puoi usare solo un singolo animateTransform tag dentro il tuo rect tag, quindi per utilizzare più animazioni devi incorporare un set di g tag, che rappresentano un gruppo di oggetti SVG.
Per fare in modo che funzioni, aggiungi l'apertura e la chiusura rect tags:
Quindi aggiungi la tua seconda animazione al di fuori della chiusura tag, ma prima La chiusura etichetta. In questo caso reintroduciamo la nostra trasformazione di traduzione:
Ora abbiamo sia la conversione in scala che quella di traduzione che animano contemporaneamente:
Puoi usare animateTransform una volta per forma o gruppo. Se hai bisogno di aggiungere altre animazioni, avvolgi un altro gruppo di tag di gruppo attorno al tuo codice e annida i tuoi ulteriori animateTransform taggalo al suo interno.
Diamo una rapida occhiata ai restanti tre tipi di trasformazione, ognuno creato modificando solo il genere, a partire dal e a impostazioni, e anche combinato con la nostra animazione di traduzione originale.
In questo esempio genere è stato impostato su ruotare, a partire dal è stato impostato su 0 iniziare senza rotazione, e a è stato impostato su 45 quindi ruotiamo di 45 gradi in due secondi:
Nelle seguenti due animazioni genere è stato impostato su skewX e skewY rispettivamente, a partire dal è impostato per 0 iniziare senza alcuna inclinazione, e a è stato impostato su 20 quindi incliniamo di 20 gradi in due secondi:
Trasformazione skewX animata
Trasformazione skewY animataCi sono un numero infinito di possibilità per le animazioni che puoi creare usando queste tecniche di base, ma una delle più immediatamente utili è la creazione di icone di caricamento dove potresti aver fatto affidamento su GIF animate.
Questa è un'icona di caricamento che ho creato in circa cinque minuti utilizzando Sketch:
Poi l'ho esportato in un file SVG che mi ha dato il seguente codice:
Dato che questa icona comprende più forme all'interno di un gruppo, e come abbiamo imparato dall'alto, puoi applicare animateTransform ad un gruppo, ho aggiunto il mio codice di animazione prima dell'ultima chiusura etichetta:
Il codice precedente imposta l'icona per ruotare da 0 a 360 gradi, cioè un cerchio completo.
Si noti che questa volta ho incluso anche due numeri in più in entrambi a partire dal e a impostazioni. Ciò indica all'animazione di ruotare attorno a un punto sull'asse X / Y interno della forma 18 18, vale a dire il centro della forma dato è di 36x36 pixel di dimensione.
Questo produce la seguente animazione:
Ancora una volta, l'animazione del tuo browser sarà più fluida rispetto alla GIF precedente, quindi assicurati di controllare la cosa reale. Come puoi vedere, è molto semplice e veloce mettere insieme animazioni da cui ottenere un solido uso pratico.
Se non hai ancora fatto una corsa con l'animazione SVG, ora dovresti avere gli strumenti necessari per ottenere un buon inizio.
