Share
In diesem Tutorial werden wir Snap.svg vorstellen, eine JavaScript-Bibliothek, die beim Animieren und Bearbeiten von SVG-Inhalten hilft. Um einige der verfügbaren Funktionen zu demonstrieren, werden wir ein SVG-Auge animieren.
Snap.svg ist eine JavaScript-Bibliothek, die das Erstellen und Bearbeiten von SVG-Grafiken für moderne Browser erleichtert. Es ist der Nachfolger von Raphaël von Dmitry Baranovskiy; Die beliebteste Javascript-Bibliothek für die Arbeit mit SVG.
Raphäel.js ist eine großartige Bibliothek. Der größte Gewinn, der 2008 veröffentlicht wurde, war die Unterstützung von Browsern ab IE 5.5. Die Unterstützung so vieler Browser war jedoch einschränkend und bedeutete, dass sie die neuesten Entwicklungen nicht implementieren konnte, sondern sich auf eine allgemeine Untermenge von SVG-Funktionen stützte.
Nach einer Weile teilte sich die Raphäel.js-Community in zwei Teile auf, eine Gruppe, die sich auf Cross-Browser-Kompatibilität stützte, und eine andere, die SVGs erstellte. Diese letzte Gruppe verlangte Änderungen, um mehr SVG-Funktionen zu unterstützen, mit denen Raphäel.js nicht umgehen konnte.
Daher wurde Snap.svg erstellt, das von Dmitry Baranovskiy (vom Adobe Web Platform-Team) vollständig von Grund auf neu geschrieben wurde, um einfacher mit SVG zu arbeiten und die neuesten Funktionen von SVG zu nutzen. Funktionen wie Maskierung, Muster, Farbverläufe, Gruppen, Animationen und mehr.
Werfen Sie einen Blick auf die API-Dokumentation und sehen Sie Funktionen wie Maske, Gruppe, Farbverlauf, Filter, Animation und Muster, die Sie auf SVGs anwenden können.
Mit Snap.svg können Sie Grafiken erstellen, es kann jedoch auch mit vorhandener SVG-Datei gearbeitet werden. Das bedeutet, dass Ihre SVG-Inhalte nicht unbedingt mit Snap.svg erstellt werden müssen. Sie können auch Grafiken bearbeiten, die mit Tools wie Adobe Illustrator, Inkscape oder Sketch erstellt wurden.
Zunächst müssen Sie Snap.svg herunterladen. Nachdem dies geschehen ist, finden Sie im Archiv Folgendes:
Starten Sie nach dem Download der Snap.svg-Ressourcen ein neues Webprojekt, das Folgendes enthalten muss:
Erstellen Sie eine HTML-Vorlage und referenzieren Sie die Skripts "scripts / snap.svg.js" und "scripts / main.js" irgendwo auf Ihrer Seite.
Danach platzieren Sie eine Behälter im Inneren und gib es ein id. Sie sollten so etwas wie dieses haben:
Einführung in Snap.svg
Lassen Sie uns jetzt direkt in die Codierung springen. Um folgen zu können, benötigen Sie etwas Grundkenntnisse und Verständnis für JavaScript, aber es ist nicht wichtig, da wir mit diesem Tutorial nicht zu tief gehen.
Zuerst initialisieren wir Snap und zeigen auf das svg erstellt und einer Variablen zugewiesen. In unserem Fall wird die Variable aufgerufen s
Accentsconagua
var s = Snap ("# svg");Von jetzt an innerhalb der s Variable haben wir Zugriff auf alle Snap.svg-Methoden. Angenommen, wir möchten einen Kreis oder ein Rechteck erstellen.
// Kreis mit 80px Radius var circle = s.circle (90,120,80); // Quadrat mit 160px Seitenbreite var Quadrat = s.rect (210,40,160,160); // Ellipse mit 80px vertikalem Radius und 50px horizontalem Radius var ellipse = s.ellipse (460,120,50,80);
Der obige Code erzeugt das folgende Ergebnis:
Wie Sie dem angefügten Screenshot entnehmen können, haben die Formen standardmäßig ein # 000 (schwarz) Füllfarbe ohne andere Formgebung. Lassen Sie uns mit ihnen interagieren und weitere Stilattribute hinzufügen, wie Füllfarbe, Deckkraft, Strichfarbe, Strichbreite und Deckkraft. Sie können die SVG-Attribute für weitere Details überprüfen.
circle.attr (Füllung: 'Koralle', Strich: 'Koralle', StrokeOpacity: .3, Strichbreite: 10); square.attr (fill: 'lightblue', Strich: 'lightblue', strokeOpacity: .3, strokeWidth: 10); ellipse.attr (fill: 'mediumturquoise', Schlaganfall: 'mediumturquoise', strokeOpacity: .2, strokeWidth: 10);
Diese Attribute haben unsere SVG-Formen viel schöner gemacht!
Nehmen wir unser Beispiel und gehen Sie über die Grundlagen hinaus.
Snap.svg verwendet eine mächtige Waffe namens group, die, wie der Name vermuten lässt, Vektoren zu einer Form zusammenfasst. Sie können beliebig viele Formen gruppieren, indem Sie sie als Liste hinzufügen.
Erstellen wir zwei Kreise, gruppieren Sie sie und verringern Sie die Füllung jedes Kreises, um die Vorgänge besser zu visualisieren.
var circle_1 = s.circle (200, 200, 140); var circle_2 = s.circle (150, 200, 140); var Kreise = s.group (Kreis_1, Kreis_2); circle.attr (fill: 'coral', fillOpacity: .6);
Lassen Sie uns nun sagen, dass wir ein imaginäres Auge mit den gruppierten Elementen erstellen möchten, die wir bereits erstellt haben. Wir können dies mit Maske tun. Zuerst müssen wir eine zusätzliche Ellipse erstellen und sie in der Mitte der Gruppe platzieren.
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); var Kreise = s.group (Kreis_1, Kreis_2); var ellipse = s.ellipse (275, 220, 170, 90); circle.attr (fill: 'coral', fillOpacity: .6,); ellipse.attr (opacity: .4);
Jetzt müssen wir die Kreise mit unserer Ellipse maskieren und der Ellipse eine andere Füllfarbe hinzufügen:
circle.attr (fill: 'coral', fillOpacity: .6, Maske: Ellipse); ellipse.attr (fill: '#fff', Deckkraft: .8);
Wenn Sie mit unserem Beispiel fortfahren, können Sie dieses Auge durch Hinzufügen einer animierten Methode zum Blinzeln bringen. Um die soeben erstellte Ellipse zu animieren, ändern wir den vertikalen Radius 1 zu 90 (was der aktuelle Wert ist) und wieder zurück.
Erstellen Sie die Animation und verpacken Sie sie in einer Funktion namens blinken.
function blink () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90, 300);); ;
Dies besagt, dass wir animieren werden ry: 90 zu ry: 1 und von ry: 90 zu ry: 1 zu unterschiedlichen Zeitpunkten.
Erstellen Sie jetzt eine setInterval anrufen blinkeneinmal alle drei Sekunden, um einen Blinkeffekt zu erzeugen.
setInterval (blink, 3000);
Der endgültige Code sollte folgendermaßen aussehen:
var circle_1 = s.circle (300, 200, 140); var circle_2 = s.circle (250, 200, 140); // Kreise zusammenfassen var circle = s.group (circle_1, circle_2); var ellipse = s.ellipse (275, 220, 170, 90); // Füllfarbe und Deckkraft zum Kreis hinzufügen und // die Maske circle.attr anwenden (fill: 'coral', fillOpacity: .6, mask: ellipse); ellipse.attr (fill: '#fff', Deckkraft: .8); // Erstellen Sie einen Blink-Effekt, indem Sie den RX-Wert ändern. // für Ellipse von 90px auf 1px und zurück blink () ellipse.animate (ry: 1, 220, function () ellipse.animate (ry: 90) , 300);); ; // Blink-Methode alle 3 Sekunden erneut aufrufen setInterval (blink, 3000);
Wie bereits erwähnt, werden diese Funktionen in modernen Browsern unterstützt: IE9+, Safari, Chrome, Firefox und Opera.
Snap.svg ist unter einer Apache 2-Lizenz verfügbar, was bedeutet, dass es vollständig Open Source und völlig kostenlos ist.
Snap.svg senkt die Barriere für einige erstaunliche SVG-Manipulationen. Ich hoffe, Ihnen hat es gefallen, mitzumachen und es hat Sie dazu inspiriert, weiter in SVG zu blicken!
