Creare un caricatore SVG animato usando DrawSVG di GreenSock

Cosa starai creando

Il tutorial di oggi ti lascerà impressionato dal fatto che hai scritto così poco codice per realizzare un'animazione così deliziosa. DrawSVG dal gruppo incredibilmente intelligente di GreenSock ti consente di mostrare (o nascondere) progressivamente il tratto di un SVG. Esaminiamo come funziona costruendo un preloader animato.

Cosa fa DrawSVG?

Come accennato, il plugin DrawSVG ti garantirà il potere di rivelare (o nascondere) il tratto di un SVG, ma può anche animare esteriore dal centro di un tratto (o qualsiasi posizione / segmento). Questo è esattamente ciò che faremo nel prossimo esercizio.

DrawSVG è parte di GreenSock Animation Platform (GSAP) e può essere utilizzato in qualsiasi animazione TweenLite, TweenMax, TimelineLite o TimelineMax. Tutte le popolari funzionalità di GSAP (controlli di runtime, callback, eases, gestione della sovrascrittura, nidificazione) funzioneranno anche con le tue fantastiche animazioni SVG! *pugno urto *

Prendi una copia di DrawSVG

L'accesso al DrawSVGPlugin più documentazione e supporto richiede un abbonamento al Club GreenSock. Al momento della stesura dei piani vanno da $ 50 a $ 150 all'anno a seconda del tipo di iscrizione.

Prova DrawSVGPlugin gratuitamente su Codepen!

C'è una versione speciale e completamente funzionale del DrawSVGPlugin collegato da DrawSVGPlugin Codepens di GreenSock, quindi sentitevi liberi di inserire una qualsiasi di esse, aggiungere la vostra grafica SVG e prendere DrawSVGPlugin per un giro. 

Nota: la versione speciale del plugin funzionerà solo sul dominio CodePen.

Costruire il nostro caricatore

Il codice che segue rappresenta tutto ciò di cui abbiamo bisogno per far funzionare questo caricatore SVG! 

Troverai i rendering demo in qualsiasi browser che supporti SVG (supporto piuttosto solido se ignori IE8 e versioni precedenti). Puoi anche visualizzare la demo completa di Filler Loader su CodePen.

Il markup

Ecco il markup di cui abbiamo bisogno:

All'interno del nostro index.html vive un singolo  tag che contiene a  etichetta. Allegato a sono due attributi che aiutano il posizionamento all'interno del riquadro di delimitazione (il quadrato nero). Questi due attributi sono cx e cy e posizionare il cerchio all'interno del viewBox del  elemento. 

Puoi vedere come funziona questo sistema nell'immagine che segue. Il primo fotogramma della serie rappresenta il nostro  senza attributi, aggiunge il secondo frame cx = "50" e infine l'ultimo frame aggiunge cy = "50" . La xey di questi attributi si riferisce al sistema di coordinate cartesiane che posiziona la nostra forma sul corrispondente piano orizzontale e verticale.

L'ultimo attributo (r) di cerchio imposta il raggio del nostro cerchio o, in altre parole, la lunghezza dal centro del cerchio al bordo del riquadro. Sentiti libero di regolare questo valore nella mia demo CodePen per vedere i risultati quando il valore viene modificato.

Gli stili

Ora per alcuni stili.

.filler-loader height: 32px; larghezza: 32 px; transform: ruotare (-90 gradi);  .fill-path fill: none; ictus: bianco; ictus-linecap: testa a testa; larghezza del tratto: 8px; 

Questo particolare esempio ha uno stile molto minimale. Definiamo alcuni vincoli come larghezza e altezza (32 x 32), quindi il .fill-percorso la classe è ciò che dà al nostro percorso il suo aspetto impostando alcune proprietà SVG a nostra disposizione nella terra dei CSS. Diamo al percorso una larghezza, un colore e un tipo di fine tratto. Il tipo di fine per questa demo è impostato su culo e completa completamente i punti finali del percorso. 

Ora possiamo ruotare il cerchio -90deg (Antiorario). Puoi vedere perché in base alle seguenti schermate di cui sotto. L'immagine a sinistra rappresenta il cerchio prima della nostra rotazione e la seconda immagine raffigura il cerchio dopo la nostra rotazione.

Il JavaScript

Ora per far funzionare le cose.

var loader = new TimelineMax (repeat: -1), fill_path = $ ('. fill-path'), fill_duration = 1.2, fill_position = '+ =. 25'; // posiziona tween .25secs dopo la fine di init tween loader.fromTo (fill_path, fill_duration, drawSVG: '0', drawSVG: '100%', fill_position) .to (fill_path, fill_duration, drawSVG: '100 % 100% ', fill_position);

Se non hai mai visto la chiamata TimelineMax non temere. Puoi leggere di più su questo qui prima di andare oltre. 

Pensa a TimelineMax come a una timeline a cui aggiungeremo i nostri frame. Nel nostro caso abbiamo una singola timeline che contiene un oggetto con a Key: Value paring per controllare la riproduzione dell'animazione. La riproduzione è impostata su ripetizione, rappresentata dal valore -1 assegnato al ripetere chiave del nostro oggetto opzioni TimelineMax. Poiché utilizziamo jQuery per il recupero DOM, stiamo acquisendo il percorso utilizzando il comando .fill-percorso classe come il nostro gancio. Questo è il riferimento che useremo per il percorso mentre iniziamo ad animarlo.

Le ultime righe rimanenti del nostro JavaScript sono dove la magia accade davvero. L'oggetto che contiene drawSVG inizia avviando il nostro percorso di animazione in senso orario da vuoto (drawSVG: '0') a riempito (drawSVG: '100%'). Ora che abbiamo riempito il percorso in una direzione, dobbiamo invertire il riempimento (in senso antiorario). Questo è dove il nostro a() il metodo arriva e dove abbiamo impostato drawSVG a "100% 100%". Dal momento che abbiamo terminato la nostra animazione di riempimento al 100%, dobbiamo invertire il riempimento di un altro 100%. Questo anima il riempimento da qualsiasi punto in cui il tratto è attualmente in uno stato in cui il tratto si trova lungo il percorso. Viola!

Conclusione

Come abbiamo visto DrawSVG è estremamente leggero e veloce da configurare, rendendo divertenti le animazioni dei percorsi per SVG anche per gli sviluppatori principianti. Con pochissima configurazione possiamo portare un altro arsenale al nostro prossimo progetto, creando interazioni ed esperienze deliziose. 

Se avete domande non esitate a chiedere nei commenti qui sotto. Felice animazione!