Vivus.js

Vivus.js

Vivus är en lätt JavaScript-klass som låter dig animera SVG: er och ger dem utseendet på att bli ritade.
Vivus är en lätt JavaScript-klass (utan beroenden) som låter dig animera SVG: er, vilket ger dem utseendet på att bli ritade.Det finns en mängd olika animationer tillgängliga, liksom möjligheten att skapa ett anpassat skript för att rita ditt SVG på vilket sätt du vill.Animationstyper • Fördröjd: Alla banelement ritas samtidigt med en liten fördröjning i början.Detta är för närvarande standardanimationen.• Synkronisering: Varje rad ritas synkront.De börjar och slutar samtidigt, därav namnet "synk".• OneByOne: Varje vägelement ritas en efter det andra.Denna animering ger det bästa intrycket av levande teckning.Tidsfunktion För att ge mer frihet är det möjligt att åsidosätta animeringen för varje sökväg och / eller hela SVG.Det fungerar precis som CSS-animeringstidsfunktionen.Men istället för att använda en cubic-bezier-funktion använder den en enkel JavaScript-funktion.Den måste acceptera ett nummer som parameter (mellan 0 till 1), sedan returnera ett nummer (även mellan 0 och 1).Det är en krok.Scenarize Med den här funktionen kan du skripta animeringen av din SVG.För att göra detta kommer de anpassade värdena att ställas in direkt i SVG: s DOM.Här är ett exempel med scenario-synkronisering.Jag rekommenderar att du tittar på källkoden och readme-filen för mer information.
vivus-js

Funktioner

Alternativ till Vivus.js för alla plattformar med öppen källkodslicens