8 JavaScript-Bibliotheken zum Animieren von SVG
SVG ist eine auflösungsunabhängige Grafik. Das heißt es wird sehen auf jedem Bildschirm gut aus, ohne an Qualität zu leiden. Darüber hinaus können Sie SVG mit einigen Animationseffekten zum Leben erwecken.
In einem Beitrag unserer SVG-Serie haben wir Ihnen gezeigt, wie die SVG-Animation mit der
Mehr auf Hongkiat.com:
- Animate.css - CSS3-Bibliothek zum einfachen Erstellen von Animationen
- Animieren Sie ganz einfach Text mit Textillate.js
- So konvertieren Sie Photoshop-Text in SVG
- Animieren, um Inhalte mit jQuery auszublenden und zu verschieben
1. Vivus
Vivus ist eine JavaScript-Bibliothek verleiht Ihrem SVG den Anschein, gezeichnet zu sein. Vivus arbeitet sofort und ohne Abhängigkeiten (z. B. jQuery). Fügen Sie einfach die .js Datei in Ihrem HTML-Code und bestimmen Sie das SVG-Element, das Sie animieren möchten, sowie einige voreingestellte Optionen, um die Animation sofort zu starten.
Zum Beispiel:
new Vivus ('svg-element', type: 'oneByOne', Dauer: 200); Das obige wird mein SVG-Element animieren, das das hat svg-element ID in 200 Millisekunden. Jedes Element dieser SVG wird innerhalb dieses Zeitrahmens nacheinander gezeichnet.
2. Bonsai
Bonsai ist eine leistungsstarke JavaScript-Bibliothek, mit der Sie grafische Elemente auf Webseiten zeichnen, verwandeln sowie animieren können. Es unterstützt sowohl den HTML5-Grafiktyp Canvas als auch SVG. Mit Bonsai können Sie ein einfaches Rechteck oder einen Kreis erstellen oder wenn Sie möchten, a vollwertiger Multiplayer animiertes Spiel wie dieses. Sie können Orbit verwenden, um zu erfahren, wie Bonsai in Live-Action funktioniert, oder sehen Sie sich einige dieser beeindruckenden Beispiele an, um Inspiration zu erhalten.
3. Geschwindigkeit
Velocity ist eine JavaScript-Bibliothek für schnelle Animationen. Die Geschwindigkeit beim Rendern von Animationen ist unglaublich schnell. Im Vergleich dazu übertrifft es jQuery und sogar CSS. Die API von Velocity funktioniert ähnlich wie die Animation in jQuery, außer dass der Schlüsselwortalias verwendet wird $ .velocity () anstatt $ .animate (). Abgesehen davon können Sie genau dieselben Animationsschlüsselwörter wie verwenden einblenden und ausblenden.
4. Raffael
RaphaelJS ist eine Bibliothek, mit der Sie Vektorgrafik-SVG auf Webseiten zeichnen und animieren können. Es unterstützt eine breite Palette von Browsern bis hin zu IE6, was Raphael so ziemlich zur zuverlässigsten JavaScript-Bibliothek in der Nische macht. Mit RaphaelJS können Sie interaktive Analysediagramme, Weltkarten und Spielinteraktionen erstellen, die der von Counter Strike ähneln.
5. Snap
SnapSVG ist eine weitere beliebte JavaScript-Bibliothek für SVG-Animationen, die vom Raphael-Entwickler Dmitry Baranovskiy zusammen mit dem Adobe Web Platform Team von Grund auf entwickelt wurde. Im Gegensatz zu Raphael ist SnapSVG jedoch nur für die neuesten Browser gedacht. Dadurch kann die Bibliothek wesentlich kleiner als Raphael sein und SVG-Funktionen wie Beschneiden und Maskieren unterstützen.
6. Faule Linienmaler
Lazy Line Painter ist ein jQuery-Plugin zum Animieren von SVG-Pfaden zum Animieren der Zeichenfolge, ähnlich wie bei Vivus. Die schlechte Nachricht ist, dass dieses Plugin nur eine sehr spezifische Sache macht. Wenn Sie SVG aus Apps wie Illustrator oder Inkscape importieren, müssen Sie daher sicherstellen, dass in Ihrer SVG keine Füllfarbe vorhanden ist, sondern nur die Pfade.
7. SVG.js
SVG.js ist eine einfache Bibliothek zum Bearbeiten und Animieren von SVG. Mit dieser Bibliothek können Sie die Größe, Position oder Farbe innerhalb Ihres SVG-Elements animieren. Es animiert aber nicht nur; Sie können auch zusätzliche Plugins anwenden, um zusätzliche Funktionen hinzuzufügen. In diesem Beispiel wird das Plug-In "svg.filter.js" verwendet, um Filter wie Gaußsche Unschärfe, Entsättigung, Kontrast, Sepia usw. auf das Bild anzuwenden.
8. Gehweg
Walkway unterstützt drei Arten von Elementen, Pfad, Linie, und Polylinie zum Zeichnen von SVG-Linien. Hier ein Beispiel von Polygon, das die Animationen der PlayStation 4-Konsolenlinie zeigt.
