Creați un încărcător SVG animat utilizând DrawSVG de la GreenSock

Tutorialul de astăzi este unul care vă va lăsa să vă simțiți impresionat că ați scris atât de puțin cod pentru a realiza o astfel de animație încântătoare. DrawSVG de către grupul incredibil de inteligent de la GreenSock vă permite să descoperiți progresiv (sau să ascundeți) cursa unui SVG. Să examinăm cum funcționează prin construirea unui preloader animat.

Ce face DrawSVG??

Așa cum am menționat, pluginul DrawSVG vă va oferi puterea de a dezvălui (sau ascunde) accidentul SVG, dar poate și să animați exterior din centrul unui accident vascular cerebral (sau al oricărei poziții / segment). Acesta este exact ceea ce vom face în exercițiul următor.

DrawSVG face parte din Platforma de animație GreenSock (GSAP) și poate fi folosit în orice animație TweenLite, TweenMax, TimelineLite sau TimelineMax. Toate functiile populare din cadrul GSAP (controale runtime, callbacks, usurinta, management de suprascriere, cuiburi) vor functiona si cu animatiile voastre fantastice SVG! *lovitură de pumn *

Luați o copie a DrawSVG

Accesul la documentația și suportul DrawSVGPlugin plus necesită o participare la Club GreenSock. În momentul scrierii, planurile variază de la 50 la 150 USD pe an, în funcție de tipul de membru.

Încercați DrawSVGPlugin gratuit pe Codepen!

Există o versiune specială, pe deplin funcțională a DrawSVGPlugin legate de din cadrul GreenSock lui DrawSVGPlugin Codepens, așa că nu ezitați să vă furcați oricare dintre ele, adăugați propriile grafice SVG și luați DrawSVGPlugin pentru o rotire. 

Notă: versiunea specială a pluginului va funcționa numai pe domeniul CodePen.

Construirea încărcătorului nostru

Codul care urmează reprezintă tot ceea ce avem nevoie pentru a face acest încărcător SVG să funcționeze! 

Veți găsi redarea demonstrativă în orice browser care acceptă SVG (suport destul de solid dacă ignorați IE8 și mai devreme). De asemenea, puteți vizualiza demonstrația completă de încărcare a filtrului pe CodePen.

Marcajul

Iată marcajul de care avem nevoie:

În cadrul nostru index.html trăiește un singur  eticheta care conține a  etichetă. Atasat la sunt două atribute care ajută la poziționarea în interiorul casetei delimitării (pătratul negru). Aceste două atribute sunt cx și cy și poziționați cercul în cadrul viewBox din  element. 

Puteți vedea cum funcționează acest sistem în imaginea care urmează. Primul cadru al seriei reprezintă al nostru  fără alte atribute, al doilea cadru adaugă cx = "50" și în final ultimul cadru adaugă cy = "50" . X și y ale acestor atribute se referă la sistemul de coordonate carteziene care poziționează forma noastră pe planul orizontal și vertical corespunzător.

Ultimul atribut (r) de cerc stabilește raza cercului nostru sau, cu alte cuvinte, lungimea de la centrul cercului până la marginea casetei. Simțiți-vă liber să reglați această valoare în demo-ul CodePen pentru a vedea rezultatele deoarece valoarea este modificată.

Stilurile

Acum pentru unele stiluri.

.încărcător de umplere height: 32px; lățime: 32px; transformă: rotiți (-90deg);  calea de încărcare fill: none; accident vascular cerebral: alb; accident vascular cerebral: cap; mărimea cursei: 8px; 

Acest exemplu particular are stil foarte minim. Definim unele constrângeri cum ar fi lăţime și înălţime (32 x 32), apoi .umple-cale clasa este ceea ce dă calea noastră apariția prin stabilirea câtorva proprietăți SVG disponibile pentru noi în teren CSS. Dăm calei o lățime, o culoare și un tip de sfârșit de cursă. Tipul final pentru această demonstrație este setat la îmbinare și completează complet punctele finale ale căii. 

Acum putem roti cercul -90deg (În sens antiorar). Puteți vedea de ce, pe baza următorului ecran capturați mai jos. Imaginea din stânga ilustrează cercul înainte de rotația noastră, iar a doua imagine ilustrează cercul după rotația noastră.

JavaScript

Acum pentru a face lucrurile să funcționeze.

var loader = noua TimelineMax (repeat: -1), fill_path = $ ("cale de completare"), fill_duration = 1.2, fill_position = '+ =. // a adăuga un număr de .25 secunde după terminarea initului de încărcare. de la end_path, fill_duration, drawSVG: '0', drawSVG: '100%', fill_position). % 100% ', fill_position);

Dacă nu ați văzut niciodată apelul TimelineMax, nu vă temeți. Puteți citi mai multe despre asta aici înainte de a merge mai departe. 

Gândiți-vă de TimelineMax ca o cronologie pe care o vom adăuga cadrele noastre. În cazul nostru avem o singură cronologie care conține un obiect cu a valoare cheie paring pentru a controla redarea animației. Redarea este setată să se repete, reprezentată de valoare -1 alocat la repeta cheie a obiectului TimelineMax. Deoarece folosim jQuery pentru recuperarea DOM, capturam calea folosind .umple-cale clasa ca cârligul nostru. Aceasta este referința pe care o vom folosi pentru calea pe măsură ce începem să o animăm.

Ultimele linii rămase ale JavaScript sunt acolo unde magia se întâmplă cu adevărat. Obiectul care conține drawSVG începe prin a începe animația noastră în sensul acelor de ceasornic de la gol (drawSVG: "0") la umplut (drawSVG: "100%"). Acum că am umplut traseul într-o direcție, trebuie să inversăm umplerea (în sens contrar acelor de ceasornic). Aici este locul nostru la() metoda vine și unde am stabilit drawSVG la "100% 100%". De când am terminat animația de umplere la 100%, trebuie să inversăm umplerea cu încă 100%. Acest lucru animă umplerea de oriunde cursa este în prezent într-o stare în care cursa există de-a lungul căii. Viola!

Concluzie

Așa cum am văzut DrawSVG este extrem de ușor și rapid de a face de stabilire a face animații cale pentru SVG mare distracție pentru a crea chiar și pentru începutul dezvoltator. Cu foarte puțin config putem aduce un alt arsenal viitorului nostru proiect, făcând interacțiuni și experiență încântătoare. 

Dacă aveți întrebări, adresați-vă comentariilor de mai jos. Animație fericită!