Vivus.js - Animacja Ścieżek SVG

Pobranie niezbędnych narzędzi

By stworzyć prostą animację ścieżek SVG potrzebujemy biblioteki Vivus i przykładowego obrazu w formacie SVG.

Potrzebujemy do tego:

  • Podpiąć do naszej strony bibliotekę Vivus.js

Linki, z których możemy pobrać wymione wyżej potrzebne nam rzeczy:

Tworzenie animacji

Do naszej strony musimy dodać element svg, pod tym linkiem znajduje się przykładowe "drzewko" w formacie SVG. Dobrym programem do pracy na formacie SVG jest Inkscape.

Upewniamy się, że mamy podpiętą bibliotekę Vivus. Dodajemy kod znajdujący się poniżej.


// my-svg --> id naszego elementu svg
// duration --> czas trwania animacji
// callback --> możemy w nim określić co ma się wykonać po zakończeniu naszej animacji

new Vivus('my-svg1', {duration: 100}, function() {
  console.log("End Animation")
});

Do naszego elementu svg musimy dodać id oraz określić jego szerokość i wysokość.


<svg  id="my-svg"  style="width: 500px; height: 500px;">
Efekty końcowy mozna zobaczyć poniżej klikając w przycisk poniżej (na tabletach i telefonach przycisk będzię niewidoczny, animacje ścieżek nie są za bardzo zooptymalizowane i mogą dość mocno "lagować"), a także klikająć w odnośnik Codepen. Trzeba wziąć pod uwagę, że animacja nie działa z każdym elementem svg, inaczej mówiąc, może wystąpić sytuacja, że prawidłowo dodamy obrazek w formacie svg, załadujemy bibliotekę a i tak nasza animacja nie ruszy.