Share
În acest tutorial vom introduce Snap.svg, o bibliotecă JavaScript care ajută la animarea și manipularea conținutului SVG. Pentru a demonstra unele dintre caracteristicile disponibile, vom anima un ochi SVG.
Snap.svg este o bibliotecă JavaScript care face ușor să creeze și să manipuleze graficele SVG pentru browserele moderne. Este succesorul lui Raphael al lui Dmitri Baranovskiy; cea mai populară bibliotecă Javascript pentru lucrul cu SVG.
Raphäel.js este o mare bibliotecă. Lansat în 2008, cea mai mare victorie a fost suportul pentru browserele de la IE 5.5. Cu toate acestea, susținerea atât de multe browsere a fost limitată și a însemnat că nu a putut implementa cele mai recente evoluții, în schimb bazându-se pe un subset comun de caracteristici SVG.
După un timp, comunitatea Raphäel.js sa împărțit în două, un grup care sa bazat pe aceasta pentru compatibilitatea cu browserul încrucișat, și pe cel care l-a folosit pentru crearea de SVG-uri. Acest ultim grup a cerut schimbări pentru a susține mai multe caracteristici SVG pe care Raphäel.js nu le-a putut face.
Prin urmare, Snap.svg a fost construit, scris în întregime de la zero de către Dmitry Baranovskiy (din echipa Adobe Platform Platform), pentru a lucra cu SVG mai ușor și pentru a folosi cele mai recente posibilități oferite de SVG; caracteristici cum ar fi masca, modele, gradienți, grupuri, animații și multe altele.
Aruncați o privire la documentația API și veți vedea caracteristici cum ar fi masca, grup, gradient, filtru, animație și model, toate pe care le puteți aplica în SVG.
Snap.svg vă va ajuta să generați grafică, dar poate funcționa și cu SVG existente. Aceasta înseamnă că conținutul dvs. SVG nu trebuie neapărat să fie creat cu Snap.svg, de asemenea, aveți libertatea de a manipula grafice create cu instrumente precum Adobe Illustrator, Inkscape sau Sketch.
În primul rând, va trebui să descărcați Snap.svg. După ce ați terminat, veți găsi în arhivă următoarele:
După descărcarea resurselor Snap.svg, începeți un nou proiect web care trebuie să includă:
Creați un șablon HTML și script-urile de referință "scripts / snap.svg.js" și "scripts / main.js" undeva pe pagina dvs..
După asta, așează un container în interiorul și dă-i un id. Ar trebui să aveți ceva asemănător:
Introducerea Snap.svg
Să mergem direct în codificare. Pentru a urmări de-a lungul timpului veți avea nevoie de cunoștințe și cunoștințe de bază despre JavaScript, dar nu contează prea mult pentru că nu mergem prea adânc cu acest tutorial.
În primul rând, vom iniția Snap, îndreptându-ne spre svg tocmai a creat-o și o atribui unei variabile. În cazul nostru, variabila este apelată s
Accentsconagua
var s = Snap ("# svg");De acum înainte, în cadrul s variabilă vom avea acces la toate metodele Snap.svg. De exemplu, să presupunem că vrem să creăm un cerc sau un dreptunghi.
// Cercul cu raza 80px var circle = s.circle (90,120,80); // Pătrat cu lățimea laterală 160px var square = s.rect (210,40,160,160); // Elipsă cu rază verticală 80px și rază orizontală 50px var ellipse = s.ellipse (460,120,50,80);
Codul de mai sus va genera următorul rezultat:
După cum puteți vedea din captura de ecran atașată, formele, în mod implicit, au a # 000 (negru) umple culoarea fără alt stil. Să interacționăm cu ele și să adăugăm mai multe atribute de styling, cum ar fi culoarea de umplere, opacitatea umplerii, culoarea accidentului, lățimea cursei, opacitatea cursei. Puteți verifica atributele SVG pentru mai multe detalii.
circle.attr (umple: 'coral', accident vascular cerebral: 'coral', strokeOpacity: .3, strokeWidth: 10); square.attr (umplere: "lumină albastră", accident vascular cerebral: "lumină deschisă", accident vascular cerebral: .3, strokeWidth: 10); ellipse.attr (fill: 'mediuturquoise', accident vascular cerebral: 'mediumturquoise', strokeOpacity: .2, strokeWidth: 10);
Aceste atribute au facut forma noastra mult mai frumoasa!
Să luăm exemplul nostru și să mergem dincolo de elementele de bază.
Snap.svg folosește o armă puternică numită grup, care, după cum sugerează și numele, grupează vectori împreună, făcându-i o formă. Puteți grupa cât mai multe forme pe care le doriți, adăugându-le ca o listă.
Să creăm două cercuri, să le grupăm și să micșorăm umplerea fiecărui cerc pentru a vizualiza mai clar ce se întâmplă.
var circle_1 = s.circle (200, 200, 140); var circle_2 = s.circle (150, 200, 140); var cercuri = s.group (circle_1, circle_2); cercuri.attr (fill: 'coral', fillOpacity: .6);
Să spunem acum că vrem să creăm un ochi imaginar folosind elementele grupate pe care le-am făcut deja. Putem face acest lucru folosind masca. Mai întâi trebuie să creăm o elipsă suplimentară și să o plasăm în mijlocul grupului.
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); var cercuri = s.group (circle_1, circle_2); var elipsă = s.ellipse (275, 220, 170, 90); cercuri.attr (umplere: 'coral', fillOpacity: .6,); ellipse.attr (opacitate: .4);
Acum trebuie să mască cercurile cu elipsa noastră, adăugând o culoare de umplere diferită la elipsă:
cercuri.attr (umplere: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacitate: .8);
Continuând cu exemplul nostru, putem face ca acest ochi să clipească, adăugând o metodă animată. Pentru a anima elipsa pe care tocmai am creat-o, vom modifica raza verticală 1 la 90 (care este valoarea curentă) și din nou.
Creați animația și împachetați-o într-o funcție numită clipi din ochi.
funcția intermitent () ellipse.animate (ry: 1, 220, funcția () ellipse.animate (ry: 90, 300);); ;
Acest lucru spune că vom anima ry: 90 la ry: 1 și din ry: 90 la ry: 1 cu diferite sincronizări.
Acum creați un setInterval pentru a apela clipi din ochio dată la fiecare trei secunde, pentru a crea un efect intermitent.
setInterval (clipește, 3000);
Codul final ar trebui să arate astfel:
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); // cercuri de grup împreună var cercuri = s.group (circle_1, circle_2); var elipsă = s.ellipse (275, 220, 170, 90); // Adăugați culoarea de umplere și opacitatea în cerc și aplicați // cercurile de mască.attr (fill: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacitate: .8); // Creați un efect clipit prin modificarea valorii rx // pentru elipse de la 90px la 1px și funcția inversă intermitentă () ellipse.animate (ry: 1, 220, function () ellipse.animate ry: 90 , 300);); ; // Reapelați metoda intermitentă o dată la fiecare 3 secunde setInterval (clipește, 3000);
După cum am menționat anterior, aceste funcții sunt acceptate în browserele moderne: IE9+, Safari, Chrome, Firefox și Opera.
Snap.svg este disponibil sub licență Apache 2, ceea ce înseamnă că este complet open-source și complet gratuit.
Snap.svg scade bariera pentru o manipulare destul de uimitoare a SVG. Sper că v-a plăcut să urmăriți și că te-a inspirat să te uiți mai departe la SVG!
