8 JavaScript-bibliotheken om SVG te animeren
SVG is een resolutie-onafhankelijke afbeelding. Dat betekent dat het zal gebeuren er goed uitzien op elk type scherm zonder kwaliteitsverlies. Buiten dat kun je SVG tot leven brengen met enkele animatie-effecten.
In een van de eerdere posts van onze SVG-serie hebben we je laten zien hoe SVG-animatie werkt met de
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 geeft uw SVG het uiterlijk om te worden getekend. Vivus werkt standaard zonder afhankelijkheden (bijvoorbeeld jQuery). Neem gewoon de .js bestand in uw HTML en wijs 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-element animeren dat de svg-element ID in 200 milliseconde. 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, als 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. Snelheid van snelheid bij het renderen van animatie is ongelooflijk snel. Het overtreft jQuery, en zelfs CSS, in vergelijking. Velocity's API werkt vergelijkbaar met de animatie in jQuery, behalve dat het de alias voor zoekwoorden gebruikt $ .Velocity () in plaats van $ .Animate (). Dat terzijde, u kunt precies dezelfde animatiezoekwoorden 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 grafieken, 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. Luie lijnschilder
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 zeer specifieke ding doet. Wanneer u SVG importeert uit apps zoals Illustrator of Inkscape, moet u ervoor zorgen dat er geen opvulkleur op uw SVG staat, 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 etc. toe te passen op de afbeelding.
8. Loopbrug
Walkway ondersteunt drie soorten elementen, pad, lijn, en polyline gebruikt om SVG-lijnen te tekenen. Hier is een voorbeeld uit Polygon dat de PlayStation 4-consolelijnanimatie laat zien.
