Share
In questo tutorial introdurremo Snap.svg, una libreria JavaScript che assiste nell'animazione e nella manipolazione del contenuto SVG. Per dimostrare alcune delle funzionalità disponibili, animeremo un occhio SVG.
Snap.svg è una libreria JavaScript che semplifica la creazione e la manipolazione di grafica SVG per i browser moderni. È il successore di Raphaël di Dmitry Baranovskiy; la libreria Javascript più popolare per lavorare con SVG.
Raphäel.js è una grande biblioteca. Rilasciato nel 2008, la sua più grande vittoria è stata il supporto per i browser da IE 5.5 in poi. Tuttavia, il supporto di così tanti browser era limitante e significava che non poteva implementare gli ultimi sviluppi, affidandosi invece a un sottoinsieme comune di funzionalità SVG.
Dopo un po 'la community di Raphäel.js si è divisa in due, un gruppo che si è basato su di esso per la compatibilità tra browser e altro che lo ha utilizzato per creare SVG. Quest'ultimo gruppo richiedeva modifiche per supportare più funzionalità SVG che Raphäel.js non poteva gestire.
Quindi Snap.svg è stato creato, scritto interamente da Dmitry Baranovskiy (del team di Adobe Web Platform), al fine di lavorare con SVG più facilmente e utilizzare l'ultimo che SVG può offrire; caratteristiche come mascheramento, motivi, gradienti, gruppi, animazioni e altro ancora.
Dai un'occhiata alla documentazione dell'API e vedrai funzioni come maschera, gruppo, gradiente, filtro, animate e pattern, che puoi applicare agli SVG.
Snap.svg ti aiuterà a generare grafica, ma può anche funzionare con SVG esistente. Ciò significa che il tuo contenuto SVG non deve necessariamente essere creato con Snap.svg, puoi anche manipolare la grafica creata con strumenti come Adobe Illustrator, Inkscape o Sketch.
Innanzitutto, è necessario scaricare Snap.svg. Fatto ciò, troverai nell'archivio quanto segue:
Dopo aver scaricato le risorse Snap.svg, avviare un nuovo progetto Web che deve includere:
Crea un modello HTML e fai riferimento agli script "scripts / snap.svg.js" e "scripts / main.js" da qualche parte sulla tua pagina.
Dopo, posiziona un contenitore dentro il e dargli un ID. Dovresti avere qualcosa di simile a questo:
Presentazione di Snap.svg
Passiamo ora direttamente alla codifica. Per seguirti avrai bisogno di una conoscenza e comprensione basilari di JavaScript, ma non importa troppo perché non stiamo andando troppo in profondità con questo tutorial.
In primo luogo, inizializzeremo lo snap, puntando al svg appena creato e assegnarlo a una variabile. Nel nostro caso viene chiamata la variabile S
Accentsconagua
var s = Snap ("# svg");Da ora in poi, all'interno del S variabile avremo accesso a tutti i metodi Snap.svg. Ad esempio, supponiamo di voler creare un cerchio o un rettangolo.
// Cerchio con raggio 80px var circle = s.circle (90,120,80); // Quadrato con larghezza lato 160 px var square = s.rect (210,40,160,160); // Ellisse con 80px raggio verticale e 50px raggio orizzontale var ellipse = s.ellipse (460,120,50,80);
Il codice sopra genererà il seguente risultato:
Come puoi vedere dallo screenshot allegato, le forme, per impostazione predefinita, hanno a # 000 (nero) riempie il colore senza altri stili. Interagiamo con loro e aggiungiamo alcuni altri attributi di stile, come il colore di riempimento, l'opacità del riempimento, il colore del tratto, la larghezza del tratto, l'opacità del tratto. È possibile controllare gli attributi SVG per maggiori dettagli.
circle.attr (fill: 'coral', stroke: 'coral', strokeOpacity: .3, strokeWidth: 10); square.attr (fill: 'lightblue', stroke: 'lightblue', strokeOpacity: .3, strokeWidth: 10); ellipse.attr (fill: 'mediumturquoise', tratto: 'mediumturquoise', strokeOpacity: .2, strokeWidth: 10);
Questi attributi hanno reso le nostre forme svg molto più belle!
Prendiamo il nostro esempio e andiamo oltre le basi.
Snap.svg utilizza un'arma potente chiamata gruppo, che, come suggerisce il nome, raggruppa i vettori, rendendoli una forma. Puoi raggruppare tutte le forme che desideri aggiungendole come elenco.
Creiamo due cerchi, raggruppali e abbassiamo il riempimento di ogni cerchio per visualizzare più chiaramente cosa sta succedendo.
var circle_1 = s.circle (200, 200, 140); var circle_2 = s.circle (150, 200, 140); var circles = s.group (circle_1, circle_2); circles.attr (fill: 'coral', fillOpacity: .6);
Diciamo ora che vogliamo creare un occhio immaginario usando gli elementi raggruppati che abbiamo già creato. Possiamo farlo usando la maschera. Per prima cosa dobbiamo creare un'ellisse extra e posizionarla nel mezzo del gruppo.
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); var circles = s.group (circle_1, circle_2); var ellipse = s.ellipse (275, 220, 170, 90); circles.attr (fill: 'coral', fillOpacity: .6,); ellipse.attr (opacity: .4);
Ora abbiamo bisogno di mascherare i cerchi con la nostra ellisse, aggiungendo un diverso colore di riempimento all'ellisse:
circles.attr (fill: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacity: .8);
Continuando con il nostro esempio, possiamo far lampeggiare questo occhio, aggiungendo un metodo animato. Per animare l'ellisse che abbiamo appena creato, modificheremo il raggio verticale da 1 a 90 (che è il valore corrente) e viceversa.
Crea l'animazione e avvolgila in una funzione chiamata lampeggiare.
function blink () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90, 300);); ;
Questo afferma che stiamo per animare da ry: 90 a ry: 1 e da ry: 90 a ry: 1 con tempi diversi.
Ora crea un setInterval chiamare il lampeggiaremetodo una volta ogni tre secondi, in modo da creare un effetto lampeggiante.
setInterval (lampeggia, 3000);
Il codice finale dovrebbe assomigliare a questo:
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); // Raggruppa i cerchi insieme var circles = s.group (circle_1, circle_2); var ellipse = s.ellipse (275, 220, 170, 90); // Aggiungi colore di riempimento e opacità al cerchio e applica // alla maschera circles.attr (fill: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', opacity: .8); // Crea un effetto lampeggiante modificando il valore rx // per l'ellisse da 90px a 1px e la funzione all'indietro lampeggia () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90 , 300);); ; // Richiamare il metodo di lampeggiamento una volta ogni 3 secondi setInterval (lampeggia, 3000);
Come accennato in precedenza, queste funzionalità sono supportate nei browser moderni: IE9+, Safari, Chrome, Firefox e Opera.
Snap.svg è disponibile con una licenza Apache 2 che significa che è completamente open-source e completamente gratuito.
Snap.svg abbassa la barriera per una manipolazione SVG piuttosto sorprendente. Spero vi sia piaciuto seguirlo e che sia stato ispirato a guardare ulteriormente in SVG!
