8 JavaScript-bibliotheken om SVG te animeren

SVG is een resolutie-onafhankelijke afbeelding. Dat betekent dat het er op elk type scherm goed uit zal zien zonder kwaliteitsverlies . Daarnaast kun je SVG tot leven laten komen met een aantal animatie-effecten.

In een van de eerdere posts van onze SVG-serie hebben we je laten zien hoe SVG-animatie werkt met de element zij het op een laag niveau. Deze keer delen we een aantal JavaScript-bibliotheken die SVG-animaties naar een hoger niveau tillen.

Meer over Hongkiat.com:

• Animate.css - CSS3 Library om eenvoudig animaties te maken
• Eenvoudig tekst animeren met Textillate.js
• Hoe Photoshop-tekst naar SVG te converteren
• Animeren om inhoud te verbergen en te schuiven met jQuery

1. Vivus

Vivus is een JavaScript-bibliotheek die uw SVG het uiterlijk geeft om te worden getekend . Vivus werkt out-of-the-box zonder afhankelijkheden (bijv. JQuery). .js eenvoudig het .js bestand toe aan uw HTML en .js het SVG-element aan dat u wilt animeren, samen met een aantal vooraf ingestelde opties om de animatie meteen te starten.

Bijvoorbeeld:

 nieuwe Vivus ('svg-element', {type: 'oneByOne', duration: 200}); 

Het bovenstaande zal mijn SVG svg-element ID van het svg-element in 200 milliseconden bezielen. Elk element van deze SVG wordt binnen dat tijdsbestek achter elkaar getekend.

2. Bonsai

Bonsai is een krachtige JavaScript-bibliotheek waarmee je grafische elementen op webpagina's kunt tekenen, morphen en animeren. Het ondersteunt zowel HTML5 grafisch type Canvas als SVG. Met Bonsai kun je een eenvoudige rechthoek of een cirkel maken of, zoals je wilt, een volwaardige multiplayer- geanimeerde game zoals deze. Je kunt Orbit gebruiken om te voelen hoe Bonsai werkt in live-actie of om een ​​paar van deze indrukwekkende voorbeelden te bekijken om inspiratie uit te halen.

3. Snelheid

Velocity is een JavaScript-bibliotheek die is gebouwd voor snelle animaties. Velocity's snelheid bij het renderen van animaties is ongelooflijk snel. Het overtreft jQuery, en zelfs CSS, in vergelijking. De API van Velocity werkt vergelijkbaar met de animatie in jQuery, behalve dat deze het sleutelwoord alias $.velocity() plaats van $.animate() . Dat terzijde, u kunt exact dezelfde animatie-trefwoorden gebruiken, zoals fadeIn en fadeOut .

4. Raphael

RaphaelJS is een bibliotheek waarmee je vectorafbeeldingen SVG op webpagina's kunt tekenen en animeren. Het ondersteunt een breed scala aan browsers tot IE6, waardoor Raphael de meest betrouwbare JavaScript-bibliotheek in de nis is. Met RaphaelJS kunt u interactieve analytische diagrammen, wereldkaarten en spelinteracties maken die vergelijkbaar zijn met die van Counter Strike.

5. Snap

SnapSVG is een andere populaire JavaScript-bibliotheek voor SVG-animatie ontwikkeld door Raphael-ontwikkelaar Dmitry Baranovskiy, samen met het Adobe Web Platform-team vanaf de basis. In tegenstelling tot Raphael is SnapSVG echter alleen bedoeld voor de nieuwste browsers. Hierdoor kan de bibliotheek aanzienlijk kleiner zijn dan Raphael en SVG-functies ondersteunen, zoals knippen en maskeren.

6. Lazy Line Painter

Lazy Line Painter is een jQuery-plug-in voor het animeren van SVG-paden om de tekenreeks te animeren, vergelijkbaar met Vivus. Het slechte nieuws is dat deze plug-in alleen dit specifieke ding doet. Wanneer u SVG importeert vanuit apps zoals Illustrator of Inkscape, moet u ervoor zorgen dat er geen opvulkleur meer is op uw SVG, alleen de paden.

7. SVG.js

SVG.js is een lichtgewicht bibliotheek voor het manipuleren en animeren van SVG. Met deze bibliotheek kunt u de grootte, positie of kleur in uw SVG-element animeren. Het animeert echter niet alleen; je kunt ook extra plug-ins toepassen om extra functionaliteiten toe te voegen. In dit voorbeeld wordt de plug-in svg.filter.js gebruikt om filters zoals gaussiaanse vervaging, desaturatie, contrast, sepia, enz. Toe te passen op de afbeelding.

8. Loopbrug

Looppad ondersteunt drie soorten elementen, path, line en polyline gebruikt om SVG-lijnen te tekenen. Hier is een voorbeeld uit Polygon dat de PlayStation 4-consolelijnanimatie laat zien.