Animacje już dawno temu stały się stałym elementem stron internetowych, możemy wykonywać je na wiele sposobów w zależności od typu elementu oraz poziomu skomplikowania samej animacji.
Dzisiaj chciałbym pokazać w jaki sposób możemy dodać animacje do plików SVG. Jak pewnie wiesz, ten typ plików obsługuje animacje CSS i możemy je wprowadzić zarówno w samym pliku SVG jak i w zewnętrznym pliku CSS bazując np. na id lub class pliku lub tagów, które są w nim zawarte.
W sytuacji gdy musimy wprowadzić animację kształtu danego elementu animacje CSS mogą być niewystarczające. W takim przypadku z pomocą przychodzi nam element <animate>, który pozwala dowolnie animować elementy tagu SVG.
Jak się do tego zabrać?
W pierwszej kolejności potrzebujemy przygotować dwie wersje pliku SVG. Pierwsza wersja powinna zawierać bazowy stan, druga zaś stan, który chcemy osiągnąć przez animacje. Na potrzeby tego artykułu przygotowałem ikonę, która prezentuje się następująco:
Na bazie tej ikony przygotowałem drugi plik SVG, który prezentuje stan jaki chcemy osiągnąć na końcu animacji.
Ważne jest by wszelkie kształty SVG zawierały te same punkty w każdym ze stanów, jak możesz zobaczyć na powyższym wideo, dla drugiego stanu nie dodawałem żadnych dodatkowych punktów do krzywych, jedynie zmieniłem wielkość niektórych kształtów. Oczywiście tag animate pozwala na utworzenie bardziej skomplikowanych animacji, jak np. zmiana kształtu z jednego w drugi, jednak by to osiągnąć podstawowy stan musi być zbudowany w taki sposób by zawierał wszystkie punkty potrzebne do stworzenia drugiego kształtu.
Wróćmy do naszego przykładu, w programie graficznym nazwałem wszystkie kształty tak, by bez problemu zlokalizować je w kodzie, tak prezentuje się zawartość pliku SVG z podstawowym stanem, od którego będziemy zaczynać animację:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<path id="border" d="M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z"/>
<path id="border-top-line" d="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z"/>
<path id="sun-line-left-top" d="M188.1,105.5c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C190.4,105.1,189.2,105.5,188.1,105.5z"/>
<path id="sun-line-right-bottom" d="M235.5,153c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C237.8,152.5,236.6,153,235.5,153z"/>
<path id="sun-line-left-bottom" d="M171.8,152.9c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0
c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C174.1,152.5,172.9,152.9,171.8,152.9z"/>
<path id="sun-line-right-top" d="M219.1,105.6c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0
c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C221.4,105.2,220.2,105.6,219.1,105.6z"/>
<path d="M203.6,143c-14.6,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5
C230.1,131.2,218.2,143,203.6,143z M203.6,99.1c-9.6,0-17.5,7.8-17.5,17.5c0,9.6,7.8,17.5,17.5,17.5c9.6,0,17.5-7.8,17.5-17.5
C221.1,106.9,213.2,99.1,203.6,99.1z"/>
<path id="sun-line-right" d="M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5
S239.6,121.1,237.1,121.1z"/>
<path id="sun-line-top" d="M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,97.2,206.1,99.2,203.6,99.2z"/>
<path id="sun-line-left" d="M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z"/>
<path id="sun-line-bottom" d="M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,152.6,206.1,154.6,203.6,154.6z"/>
<path id="mountains" d="M272.9,246.2l-57.6-57.6c-1.4-1.4-3.7-1.7-5.4-0.7l-42,24.3L59.8,77.3c-0.9-1.1-2.1-1.7-3.5-1.7c0,0,0,0,0,0
c-1.4,0-2.7,0.6-3.5,1.7l-29,36.4c-1.5,1.9-1.2,4.8,0.7,6.3c1.9,1.5,4.8,1.2,6.3-0.7l25.5-32l54.5,68l-37.1-9.6
c-1.4-0.4-2.9,0-4,0.9l-13.3,11.1l-13.2-11.5c-1.4-1.2-3.5-1.5-5.1-0.6l-12.9,7.2c-2.2,1.2-3,3.9-1.8,6.1c1.2,2.2,3.9,3,6.1,1.8
l10.2-5.6l13.7,12c0.8,0.7,1.9,1.1,3,1.1c1,0,2-0.3,2.9-1L73.6,155l46.5,12l43.1,53.8c1.4,1.7,3.8,2.2,5.8,1.1l42.3-24.5l55.2,55.2
c0.9,0.9,2,1.3,3.2,1.3s2.3-0.4,3.2-1.3C274.6,250.8,274.6,248,272.9,246.2z"/>
</svg>
Code language: HTML, XML (xml)W tym momencie możemy przejść do użycia elementu <animate> – element ten dodajemy wewnątrz elementu, który chcemy animować, w naszym wypadku będą to elementy path, czyli ścieżki.
Aby było prościej na początek pokażę jak dodać animację dla pojedynczej ścieżki, weźmy na pierwszy ogień path z ID border-top-line – jest to linia, która znajduje się w górnej części obrysu naszej ikony. Kod odpowiedzialny za nią prezentuje się tak:
<path id="border-top-line" d="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z"/>Code language: HTML, XML (xml)W pierwszej kolejności musimy zmienić sposób zamknięcia tagu path w związku z tym usuwamy / z końca tagu i dodajemy </path>, teraz między otwarciem i zamknięciem tagu mamy miejsce na tworzenie animacji, dodajemy więc w te miejsce poniższy kod:
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="wartość-początkowa-atrybutu-d;
wartość-końcowa-atrybutu-d;
wartość-początkowa-atrybutu-d;"
fill="freeze"
calcMode="linear"
/>Code language: HTML, XML (xml)W omawianym przypadku chcę by animacja wykonywała się cały czas, dlatego parametr repeatCount ustawiony jest na indefinite. Parametr values zawierać będzie 3 wartości oddzielone średnikiem – wartość początkową, wartość końcową i ponownie wartość początkową, tak by animacja wykonywała się płynnie między początkiem i końcem, gdybyśmy zostawili tylko wartość początkową i końcową, to po dojściu do wartości końcowej uzyskamy nagły przeskok do stanu początkowego, zamiast płynnego przejścia.
Teraz na podstawie powyższej bazy elementu <animate> przygotujmy nową wersję elementu <path> zawierającego animację:
<path id="border-top-line" d="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z">
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z;
M88.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h10.4c2.5,0,4.5,2,4.5,4.5S91.2,51.1,88.7,51.1z; M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z;"
fill="freeze"
calcMode="linear"
/>
</path>Code language: HTML, XML (xml)Wartość, którą nazwaliśmy wcześniej wartość-początkowa-atrybutu-d pobieramy z atrybutu d elementu path w podstawowej wersji, po prostu wklejamy ją w dwa miejsca. Wartość wartość-końcowa-atrybutu-d kopiujemy z atrybutu d ścieżki z ID border-top-line z drugiego pliku SVG, który zawiera końcowy stan animacji.
Dzięki temu uzyskaliśmy animacje pierwszego elementu i prezentuje się ona następująco:
Jak pewnie zauważyłeś element animate zawiera kilka atrybutów, pełną ich listę oraz dostępne wartości możesz znaleźć np. tutaj. W omawianym przypadku ustawiliśmy czas animacji (atrybut dur) na 3.5 sekundy (jest to czas całej animacji, od początku do końca i znów do początku), wspomniany już atrybut repeatCount na nieokreślony, co powoduje nieskończone wykonywanie się animacji, atrybut attributeName określa jaki atrybut elementu path chcemy animować, jest to atrybut d, fill definiuje finalny stan animacji, w naszym przypadku wartość freeze zachowuje stan ostatniej klatki animacji. Ostatni atrybut calcMode określa tryb interpolacji animacji i jest ustawiony na domyślną wartość.
Wiemy już jak dodać animację do poszczególnej ścieżki, poniżej znajdziesz finalną wersję pliku SVG zawierającego animacje dodane do wszystkich ścieżek, które chcieliśmy animować:
A tak prezentuje się finalny kod SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<path id="border" d="M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z">
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;
M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H110c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h150.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;
M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;"
fill="freeze"
calcMode="linear"
/>
</path>
<path id="border-top-line" d="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z">
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z;
M88.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h10.4c2.5,0,4.5,2,4.5,4.5S91.2,51.1,88.7,51.1z;
M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z;"
fill="freeze"
calcMode="linear"
/>
</path>
<path id="sun-line-left-top" d="M188.1,105.5c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C190.4,105.1,189.2,105.5,188.1,105.5z">
</path>
<path id="sun-line-right-bottom" d="M235.5,153c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C237.8,152.5,236.6,153,235.5,153z"/>
<path id="sun-line-left-bottom" d="M171.8,152.9c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0
c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C174.1,152.5,172.9,152.9,171.8,152.9z"/>
<path id="sun-line-right-top" d="M219.1,105.6c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0
c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C221.4,105.2,220.2,105.6,219.1,105.6z"/>
<path d="M203.6,143c-14.6,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5
C230.1,131.2,218.2,143,203.6,143z M203.6,99.1c-9.6,0-17.5,7.8-17.5,17.5c0,9.6,7.8,17.5,17.5,17.5c9.6,0,17.5-7.8,17.5-17.5
C221.1,106.9,213.2,99.1,203.6,99.1z"/>
<path id="sun-line-right" d="M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5
S239.6,121.1,237.1,121.1z">
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5
S239.6,121.1,237.1,121.1z;
M247.1,121.1h-21.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5
S249.6,121.1,247.1,121.1z;
M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5
S239.6,121.1,237.1,121.1z"
fill="freeze"
calcMode="linear"
/>
</path>
<path id="sun-line-top" d="M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,97.2,206.1,99.2,203.6,99.2z">
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,97.2,206.1,99.2,203.6,99.2z;
M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V73c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7
C208.1,97.2,206.1,99.2,203.6,99.2z;
M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,97.2,206.1,99.2,203.6,99.2z;"
fill="freeze"
calcMode="linear"
/>
</path>
<path id="sun-line-left" d="M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z">
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z;
M181.7,121.1H160c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z;
M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z"
fill="freeze"
calcMode="linear"
/>
</path>
<path id="sun-line-bottom" d="M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,152.6,206.1,154.6,203.6,154.6z">
<animate class="animate" dur="3.5s" repeatCount="indefinite" attributeName="d"
values="M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,152.6,206.1,154.6,203.6,154.6z;
M203.6,164.6c-2.5,0-4.5-2-4.5-4.5v-21.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7
C208.1,162.6,206.1,164.6,203.6,164.6z;
M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,152.6,206.1,154.6,203.6,154.6z"
fill="freeze"
calcMode="linear"
/>
</path>
<path id="mountains" d="M272.9,246.2l-57.6-57.6c-1.4-1.4-3.7-1.7-5.4-0.7l-42,24.3L59.8,77.3c-0.9-1.1-2.1-1.7-3.5-1.7c0,0,0,0,0,0
c-1.4,0-2.7,0.6-3.5,1.7l-29,36.4c-1.5,1.9-1.2,4.8,0.7,6.3c1.9,1.5,4.8,1.2,6.3-0.7l25.5-32l54.5,68l-37.1-9.6
c-1.4-0.4-2.9,0-4,0.9l-13.3,11.1l-13.2-11.5c-1.4-1.2-3.5-1.5-5.1-0.6l-12.9,7.2c-2.2,1.2-3,3.9-1.8,6.1c1.2,2.2,3.9,3,6.1,1.8
l10.2-5.6l13.7,12c0.8,0.7,1.9,1.1,3,1.1c1,0,2-0.3,2.9-1L73.6,155l46.5,12l43.1,53.8c1.4,1.7,3.8,2.2,5.8,1.1l42.3-24.5l55.2,55.2
c0.9,0.9,2,1.3,3.2,1.3s2.3-0.4,3.2-1.3C274.6,250.8,274.6,248,272.9,246.2z"/>
</svg>
Code language: HTML, XML (xml)Uruchomienie animacji po akcji użytkownika
W powyższym przykładzie animacja wykonuje się od razu i w nieskończonej pętli, jednak często będziemy potrzebowali uruchomić ją raz, po konkretnym działaniu użytkownika, np. gdy przescrolluje do danej sekcji, kliknie w dany element czy na hover samego pliku SVG. Oczywiście element <animate> pozwala nam na uzyskanie takiego efektu, jednak będziemy musieli delikatnie przerobić nasz plik SVG oraz dodać kilka linijek JS, odpowiedzialnych za uruchomienie animacji na pożądane działanie.
Na początku przygotujmy nasz plik SVG , w każdym z tagów animate musimy zmienić wartość atrybutu repeatCount na 1 – ponieważ chcemy by animacja wykonała się raz, po określonej akcji użytkownika. Dodatkowo do każdego elementu <animate> musimy dodać dodatkowy atrybut begin z wartością indefinite, co spowoduje, że animacja nie zostanie uruchomiona automatycznie. Tak prezentuje się finalny kod pliku SVG, który będzie animowany po określonej akcji użytkownika:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<path id="border" d="M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z">
<animate class="animate" dur="3.5s" repeatCount="1" attributeName="d"
values="M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;
M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H110c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h150.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;
M260.8,257.9H39.2c-9.1,0-16.5-7.4-16.5-16.5V58.6c0-9.1,7.4-16.5,16.5-16.5h20.3c2.5,0,4.5,2,4.5,4.5
s-2,4.5-4.5,4.5H39.2c-4.1,0-7.5,3.4-7.5,7.5v182.9c0,4.1,3.4,7.5,7.5,7.5h221.5c4.1,0,7.5-3.4,7.5-7.5V58.6c0-4.1-3.4-7.5-7.5-7.5
H150c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h110.8c9.1,0,16.5,7.4,16.5,16.5v182.9C277.3,250.5,269.9,257.9,260.8,257.9z;"
fill="freeze"
calcMode="linear"
begin="indefinite"
/>
</path>
<path id="border-top-line" d="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z">
<animate class="animate" dur="3.5s" repeatCount="1" attributeName="d"
values="M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z;
M88.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h10.4c2.5,0,4.5,2,4.5,4.5S91.2,51.1,88.7,51.1z;
M128.7,51.1H78.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h50.4c2.5,0,4.5,2,4.5,4.5S131.2,51.1,128.7,51.1
z;"
fill="freeze"
calcMode="linear"
begin="indefinite"
/>
</path>
<path id="sun-line-left-top" d="M188.1,105.5c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C190.4,105.1,189.2,105.5,188.1,105.5z">
</path>
<path id="sun-line-right-bottom" d="M235.5,153c-1.2,0-2.3-0.4-3.2-1.3l-16.4-16.4c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
l16.4,16.4c1.8,1.8,1.8,4.6,0,6.4C237.8,152.5,236.6,153,235.5,153z"/>
<path id="sun-line-left-bottom" d="M171.8,152.9c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0
c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C174.1,152.5,172.9,152.9,171.8,152.9z"/>
<path id="sun-line-right-top" d="M219.1,105.6c-1.2,0-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4l16.4-16.4c1.8-1.8,4.6-1.8,6.4,0
c1.8,1.8,1.8,4.6,0,6.4l-16.4,16.4C221.4,105.2,220.2,105.6,219.1,105.6z"/>
<path d="M203.6,143c-14.6,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5
C230.1,131.2,218.2,143,203.6,143z M203.6,99.1c-9.6,0-17.5,7.8-17.5,17.5c0,9.6,7.8,17.5,17.5,17.5c9.6,0,17.5-7.8,17.5-17.5
C221.1,106.9,213.2,99.1,203.6,99.1z"/>
<path id="sun-line-right" d="M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5
S239.6,121.1,237.1,121.1z">
<animate class="animate" dur="3.5s" repeatCount="1" attributeName="d"
values="M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5
S239.6,121.1,237.1,121.1z;
M247.1,121.1h-21.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5
S249.6,121.1,247.1,121.1z;
M237.1,121.1h-11.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5
S239.6,121.1,237.1,121.1z"
fill="freeze"
calcMode="linear"
begin="indefinite"
/>
</path>
<path id="sun-line-top" d="M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,97.2,206.1,99.2,203.6,99.2z">
<animate class="animate" dur="3.5s" repeatCount="1" attributeName="d"
values="M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,97.2,206.1,99.2,203.6,99.2z;
M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V73c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7
C208.1,97.2,206.1,99.2,203.6,99.2z;
M203.6,99.2c-2.5,0-4.5-2-4.5-4.5V83c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,97.2,206.1,99.2,203.6,99.2z;"
fill="freeze"
calcMode="linear"
begin="indefinite"
/>
</path>
<path id="sun-line-left" d="M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z">
<animate class="animate" dur="3.5s" repeatCount="1" attributeName="d"
values="M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z;
M181.7,121.1H160c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h21.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z;
M181.7,121.1H170c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h11.7c2.5,0,4.5,2,4.5,4.5S184.2,121.1,181.7,121.1
z"
fill="freeze"
calcMode="linear"
begin="indefinite"
/>
</path>
<path id="sun-line-bottom" d="M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,152.6,206.1,154.6,203.6,154.6z">
<animate class="animate" dur="3.5s" repeatCount="1" attributeName="d"
values="M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,152.6,206.1,154.6,203.6,154.6z;
M203.6,164.6c-2.5,0-4.5-2-4.5-4.5v-21.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v21.7
C208.1,162.6,206.1,164.6,203.6,164.6z;
M203.6,154.6c-2.5,0-4.5-2-4.5-4.5v-11.7c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5v11.7
C208.1,152.6,206.1,154.6,203.6,154.6z"
fill="freeze"
calcMode="linear"
begin="indefinite"
/>
</path>
<path id="mountains" d="M272.9,246.2l-57.6-57.6c-1.4-1.4-3.7-1.7-5.4-0.7l-42,24.3L59.8,77.3c-0.9-1.1-2.1-1.7-3.5-1.7c0,0,0,0,0,0
c-1.4,0-2.7,0.6-3.5,1.7l-29,36.4c-1.5,1.9-1.2,4.8,0.7,6.3c1.9,1.5,4.8,1.2,6.3-0.7l25.5-32l54.5,68l-37.1-9.6
c-1.4-0.4-2.9,0-4,0.9l-13.3,11.1l-13.2-11.5c-1.4-1.2-3.5-1.5-5.1-0.6l-12.9,7.2c-2.2,1.2-3,3.9-1.8,6.1c1.2,2.2,3.9,3,6.1,1.8
l10.2-5.6l13.7,12c0.8,0.7,1.9,1.1,3,1.1c1,0,2-0.3,2.9-1L73.6,155l46.5,12l43.1,53.8c1.4,1.7,3.8,2.2,5.8,1.1l42.3-24.5l55.2,55.2
c0.9,0.9,2,1.3,3.2,1.3s2.3-0.4,3.2-1.3C274.6,250.8,274.6,248,272.9,246.2z"/>
</svg>
Code language: HTML, XML (xml)Teraz przejdźmy do skryptu, który będzie uruchamiał animacje na określoną akcję użytkownika, przyjmijmy, że animacja ma zostać uruchomiona po kliknięciu w ikonę. Do uruchomienia samej animacji wykorzystamy metodę beginElement(). Musimy więc utworzyć tablicę z wszystkimi ścieżkami, które będą animowane, w pliku SVG dodałem do każdej z nich klasę animate, mając taką tablicę dodajemy funkcję addEventListener("click") , która zostanie uruchomiona w momencie kliknięcia w ikonę SVG i, wykorzystując metodę beginElements() uruchomi ona animację każdej ścieżki z tablicy. Działający przykład takiego rozwiązania możesz zobaczyć tutaj.
Podsumowanie
Jak widzisz na powyższych przykładach wykonanie prostych i średnio zaawansowanych animacji na plikach SVG jest możliwe bez instalacji i poznawania zewnętrznych bibliotek. Pewnym minusem tego rozwiązania jest fakt, że musimy mieć dostęp do programu graficznego i umiejętności, które pozwolą nam przygotować pliki odpowiedzialne za poszczególne stany animacji, jednakże zawsze możemy poprosić o to grafika, który przygotowywał dane ikony lub inne elementy graficzne.
Dodaj komentarz