Lag en animert SVG-laster ved hjelp av GreenSocks DrawSVG

Hva du skal skape

Dagens opplæring er en som vil la deg føle deg imponert over at du har skrevet så lite kode for å oppnå en så hyggelig animasjon. DrawSVG av den utrolig smarte gruppen ved GreenSock gjør at du gradvis kan avdekke (eller skjule) slaget av en SVG. La oss undersøke hvordan det fungerer ved å bygge en animert forlaster.

Hva gjør DrawSVG?

Som nevnt, vil DrawSVG-plugin gi deg muligheten til å avsløre (eller skjule) slag av et SVG, men det kan også animere ytre fra sentrum av et slag (eller en hvilken som helst stilling / segment). Dette er akkurat det vi skal gjøre i den kommende øvelsen.

DrawSVG er en del av GreenSock Animation Platform (GSAP) og kan brukes i hvilken som helst TweenLite, TweenMax, TimelineLite eller TimelineMax animasjon. Alle de populære funksjonene innen GSAP (kjøretidskontroller, tilbakeringinger, letter, overstyring, hekking) vil fungere med dine fancy SVG-animasjoner også! *knyttnevehilsen*

Ta en kopi av DrawSVG

Tilgang til DrawSVGPlugin pluss dokumentasjon og støtte krever et Club GreenSock-medlemskap. På tidspunktet for skriving planer varierer fra $ 50 til $ 150 per år avhengig av medlemskapstype.

Prøv DrawSVGPlugin gratis på Codepen!

Det er en spesiell, fullt funksjonell versjon av DrawSVGPlugin knyttet til fra GreenSocks DrawSVGPlugin Codepens, så vær gledelig å gaffel noen av dem, legg til din egen SVG-grafikk og ta DrawSVGPlugin for en tur. 

Merk: Den spesielle versjonen av pluginet vil bare fungere på CodePen-domenet.

Bygge vår laster

Koden som følger representerer alt vi trenger for å gjøre dette SVG-lasterarbeidet! 

Du finner demoen i en hvilken som helst nettleser som støtter SVG (ganske solid støtte hvis du ignorerer IE8 og tidligere). Du kan også se den fullstendige Filler Loader-demoen på CodePen.

The Markup

Her er oppslaget vi trenger:

Innenfor vår index.html lever en enkelt  tag som inneholder a  stikkord. Vedlagt til er to attributter som hjelper posisjonering innenfor grenseboksen (det svarte torget). Disse to attributter er cx og cy og plasser sirkelen i ViewBox av  element. 

Du kan se hvordan dette systemet fungerer i bildet som følger. Den første rammen av serien representerer vår  uten noen attributter, legger den andre rammen til cx = "50" og til slutt legger den siste rammen til cy = "50" . X og y av disse attributter refererer til kartesian koordinatsystemet posisjonering vår form på det tilsvarende horisontale og vertikale plan.

Den siste attributtet (r) av sirkel setter radiusen til sirkelen vår, eller med andre ord lengden fra senterets sirkel til kanten av boksen. Du er velkommen til å justere den verdien i min CodePen-demo for å se resultatene ettersom verdien er endret.

Stilene

Nå for noen stiler.

.Filler-Loader høyde: 32px; bredde: 32px; transformere: roter (-90deg);  .fill-banen fill: none; slag: hvit; strekk-linecap: butt; strekkbredde: 8px; 

Dette bestemte eksempelet har svært minimal styling. Vi definerer noen begrensninger som bredde og høyde (32 x 32), og deretter .fylle-banen klassen er hva som gir vår bane sitt utseende ved å sette inn noen SVG egenskaper som er tilgjengelige for oss i CSS land. Vi gir banen en bredde, en farge og en slankende sluttype. Sluttypen for denne demoen er satt til rumpe og fullstendig kvadrer endepunktene på banen. 

Nå kan vi rotere sirkelen -90deg (Mot urviseren). Du kan se hvorfor basert på følgende skjermfangster nedenfor. Det venstre bildet viser sirkelen før rotasjonen vår, og det andre bildet viser sirkelen etter rotasjonen vår.

JavaScript

Nå for å få ting til å fungere.

var loader = ny TimelineMax (repeat: -1), fill_path = $ ('fill-path'), fill_duration = 1,2, fill_position = '+ = .25'; // plass mellom 0,25 sek etter slutten av start mellom loader.fromTo (fill_path, fill_duration, drawSVG: '0', drawSVG: '100%', fill_position) .to (fill_path, fill_duration, drawSVG: '100 % 100% ', fill_position);

Hvis du aldri har sett TimelineMax-samtalen, vær ikke redd. Du kan lese mer om det her før du går videre. 

Tenk på TimelineMax som en tidslinje som vi legger til rammer for. I vårt tilfelle har vi en enkelt tidslinje som inneholder et objekt med en nøkkel: verdi paring for å kontrollere avspillingen av animasjonen. Avspillingen er satt til å gjenta, representert av verdien -1 tilordnet til gjenta nøkkel i vårt TimelineMax-alternativobjekt. Siden vi bruker jQuery for DOM-henting, tar vi opp banen ved å bruke .fylle-banen klassen som vår krok. Dette er referansen vi bruker til stien når vi begynner å animere den.

De siste gjenværende linjene i JavaScript er hvor den magiske virkelig skjer. Objektet som inneholder drawSVG starter ved å starte vei animasjonen med klokken fra tomt (drawSVG: '0') å fylle (drawSVG: '100%'). Nå som vi har fylt banen i en retning, må vi reversere fyllingen (mot klokken). Det er her vår til() Metoden kommer inn og hvor vi har satt drawSVG til '100% 100%'. Siden vi avsluttet vår fill animasjon på 100% må vi reversere fyllingen en annen 100%. Dette animerer fyllingen fra hvor streken er for tiden til en stat der streken eksisterer langs banen. Viola!

Konklusjon

Som vi har sett, er DrawSVG ekstremt lett og rask å installere, og gjør banen til SVG veldig morsomt å lage selv for begynnelsesutvikleren. Med svært lite konfigurasjon kan vi bringe et annet arsenal til vår neste prosess som gjør samhandlinger og oppleve herlig. 

Har du spørsmål, kan du spørre i kommentarene nedenfor. Glad animasjon!