Poradnik dotyczący animacji SVG

Opublikowany: 2022-03-11

Każdy warty swojej soli inżynier front-end zdaje sobie sprawę z wyzwań, jakie niesie rozdrobniony ekosystem urządzeń. Różne rozmiary ekranu, rozdzielczości i współczynniki proporcji utrudniają zapewnienie spójnych wrażeń. Bardziej dla tych, którzy chcą zapewnić doskonałe wrażenia z pikseli.

Skalowalna grafika wektorowa (SVG) pomaga rozwiązać część tego problemu i robi to bardzo dobrze. Chociaż mają swoje ograniczenia, pliki SVG mogą być bardzo pomocne w niektórych sytuacjach, a jeśli masz dobry zespół projektowy, możesz również stworzyć bardziej oszałamiające wizualnie wrażenia bez nadmiernego obciążania przeglądarki internetowej lub skrócenia czasu ładowania.

W ciągu ostatnich kilku miesięcy pracowałem nad projektem, który w dużym stopniu wykorzystuje SVG oraz jego możliwości animacji i efektów. W tym artykule podzielę się tym, w jaki sposób możesz wykorzystać SVG i jego techniki animacji, aby tchnąć nowe życie w swoją pracę front-endową.

Skalowalna Grafika wektorowa

SVG to format obrazu oparty na XML, podobnie jak działa HTML. Definiuje różne elementy dla wielu znanych kształtów geometrycznych, które można łączyć w znacznikach, aby uzyskać dwuwymiarową grafikę.

Specyfikacja SVG to otwarty standard opracowany przez World Wide Web Consortium (W3C) w 1999 roku.

Wszystkie główne przeglądarki internetowe od jakiegoś czasu obsługują renderowanie SVG.

Ponieważ grafiki SVG są dokumentami XML, przeglądarki internetowe udostępniają interfejsy API oparte na węzłach DOM, których można używać do interakcji z obrazami. Porozmawiaj o ożywianiu zdjęć!

Ścieżki SVG

Jeśli w SVG jest jeden przeciążony element, byłby to element <path> .

Element ścieżki to podstawowy kształt, którego można użyć do stworzenia prawie każdego zaawansowanego kształtu 2D, jaki można sobie wyobrazić.

Element działa na podstawie sekwencji poleceń rysowania. Przypomina język programowania Logo z 1967 roku, tylko zmodernizowany i zaprojektowany z myślą o wymyślnej grafice. Element przyjmuje tę sekwencję poleceń rysowania poprzez atrybut d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Możesz pomyśleć o wirtualnym piórze, które rysuje na ekranie, a komentarze do rysowania w elemencie ścieżki jedynie sterują piórem. W powyższym przykładzie pisak otrzymuje polecenie przejścia do pozycji (10, 10) ( M10 10 ), narysowania linii do (75, 10) ( L75 10 ), narysowania linii do (75, 75) L75 75 a następnie zamknąć ścieżkę wracając do punktu początkowego ( Z ).

Używając innych poleceń rysowania, takich jak łuki ( A ), kwadratowe krzywe Beziera ( Q ), sześcienne krzywe Beziera ( C ) itp., możesz tworzyć znacznie bardziej złożone kształty i grafiki w SVG.

Możesz dowiedzieć się dużo więcej o elemencie ścieżki tutaj.

Ścieżki SVG i CSS

„Ok Juan, rozumiem. Ścieżki są potężne, ale jak je ożywić?” mówisz.

W naszej pierwszej technice wykorzystamy dwa atrybuty SVG: stroke-dasharray i stroke-dashoffset .

Atrybut stroke-dasharray steruje wzorem kresek i przerw używanych do obrysowania ścieżki. Jeśli chcesz narysować linie jako grupę kresek i przerw zamiast jednego ciągłego pociągnięcia atramentem, użyjesz tego atrybutu.

Ponieważ obrazy SVG są częścią DOM przeglądarki internetowej, a stroke-dasharray jest elementem prezentacji, atrybut można również ustawić za pomocą CSS.

Podobnie, atrybut stroke-dashoffset (który określa, jak daleko we wzorze kreski rozpoczyna się kreska) można również kontrolować za pomocą CSS.

Te dwa atrybuty SVG razem mogą być używane do animowania ścieżek SVG, dając widzowi złudzenie, że ścieżki są rysowane stopniowo.

Weźmy na przykład tę kwadratową krzywą Beziera: 

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Aby animować tę ścieżkę tak, jakby była rysowana stopniowo i płynnie na ekranie, będziemy musieli ustawić długość kreski (i przerwy) za pomocą atrybutu stroke-dasharray, równej długości ścieżki. Dzieje się tak, aby długość każdej kreski i przerwy w przerywanej krzywej była równa długości całej ścieżki.

Następnie ustawimy przesunięcie kreski, używając atrybutu obrysu-dashoffset, na 0. Spowoduje to, że ścieżka pojawi się na ekranie jako pełna krzywa (zasadniczo patrzymy na pierwszą kreskę, a już zrobiliśmy, że każda kreska obejmuje całą długość krzywej). Ustawiając przesunięcie kreski równe długości krzywej, otrzymamy niewidoczną krzywą (teraz patrzymy na renderowaną krzywą jako całą przerwę — część, która następuje bezpośrednio po kreski).

Teraz, animując właściwość obrys-kreska, możesz sprawić, że krzywa będzie stopniowo pojawiać się na ekranie.

Zobacz Pen Toptal - SVG & CSS paths autorstwa Toptal Blog (@toptalblog) na CodePen.

Jak widać, krzywa jest zawsze. Zmieniamy tylko przesunięcie kreski, aby część kreskowana pojawiała się krok po kroku.

Możesz pójść o krok dalej, stosując tę ​​samą zasadę, ale z większą liczbą ścieżek:

Zobacz Pen Toptal - SVG & CSS paths autorstwa Toptal Blog (@toptalblog) na CodePen.

Tutaj masz jedną czarną krzywą, która jest ustalona, ​​czerwoną, która porusza się po ścieżce, a drugą czarną podążającą za czerwoną, ale 40px za nią.

Stroke-dasharray i stroke-dashoffset to dwa bardzo potężne atrybuty, których można użyć do zastosowania mnóstwa animacji i efektów do ścieżek SVG. Możesz wypróbować to poręczne narzędzie, którego możesz użyć do eksperymentowania z tymi dwoma atrybutami.

Animowanie obiektów wzdłuż ścieżek SVG

Dzięki SVG i CSS kolejną fajną rzeczą, którą możesz zrobić, jest animowanie obiektów lub elementów podążających ścieżką.

Istnieją 2 atrybuty SVG, których użyjemy do animacji:

  • offset-path: Właściwość offset-path CSS określa ścieżkę przesunięcia, w której element jest umieszczany.

  • offset-distance: Właściwość CSS offset-distance określa pozycję wzdłuż ścieżki offsetu.

Łącząc te dwie właściwości, możesz łatwo wymyślić takie animacje:

Zobacz Pen Toptal - SVG & CSS paths autorstwa Toptal Blog (@toptalblog) na CodePen.

Jak widać, mamy nowy element div.ball .

Tym elementem może być cokolwiek, div, obraz, tekst, cokolwiek. Pomysł w tym przykładzie jest taki, że za pomocą offset-path i offset-distance możesz nadać elementowi ścieżkę do podążania i animować odległość, a element będzie się poruszał po ścieżce.

Animacje SVG przy użyciu JavaScript

Jeśli to wszystko nie jest już wystarczająco fantazyjne, zawsze możesz skorzystać z JavaScript.

Animowanie elementów SVG za pomocą JavaScript może przypominać animowanie elementów DOM. Jednak dzięki JavaScript możesz osiągnąć techniki animacji, które sprawdziliśmy powyżej, ale łatwiej.

Wcześniej musieliśmy na stałe zakodować długości ścieżek w naszym CSS. Za pomocą funkcji JavaScript path.getTotalLength() można na bieżąco obliczyć długość ścieżki i wykorzystać ją w razie potrzeby. Więcej na ten temat dowiesz się tutaj.

Poza tym do Twojej dyspozycji jest już wiele bibliotek, które mogą sprawić, że animacje SVG będą o wiele łatwiejsze niż jest.

Snap.svg nie tylko ułatwia rysowanie obrazów SVG za pomocą JavaScript, ale także sprawia, że ​​ich animowanie jest tak proste, jak wywołanie .animate({}) .

Inna biblioteka, anime.js, pozwala stworzyć element div podążający ścieżką SVG za pomocą zaledwie kilku linijek kodu.

Jeśli szukasz biblioteki, która sama robi więcej, ale sprawia, że ​​wyniki nadal wyglądają oszałamiająco, to Vivus jest tym, czego szukasz. Wymaga innego, bardziej opartego na konfiguracji podejścia do animacji ścieżki SVG. Dzięki tej bibliotece wystarczy dodać identyfikator do elementu SVG, który chcesz narysować, i zdefiniować obiekt Vivus za pomocą tego identyfikatora. Resztą zajmie się Vivus.

Dalsza lektura

Poniżej znajduje się lista zasobów, które mogą okazać się przydatne podczas pracy z obrazami SVG i ich animowania:

Aby zagłębić się w animację SVG, możesz przeczytać ten krótki artykuł na temat trzech sposobów animowania obrazów SVG i obejrzeć screencast wideo przy użyciu sztuczek CSS.

Jedyną rzeczą, której ten artykuł nie dotyczy, jest animowanie obrazów SVG za pomocą Synchronized Multimedia Integration Language (SMIL). Podczas gdy używanie CSV dla SVG daje przewagę pracy z czymś, co już znasz, SMIL przenosi rzeczy na wyższy poziom.

Dzięki SMIL możesz zaimplementować zaawansowane efekty animacji, takie jak morfing kształtów, używając samego SVG. Krótki, ale skuteczny przewodnik dotyczący używania SMIL do takich efektów jest dostępny tutaj.

Chociaż obsługa SMIL jest w tej chwili nieco dziwna (gra słów nie jest przeznaczona).

Bezkompromisowe animacje w sieci

W tym artykule omówiłeś kilka sposobów animowania elementów SVG za pomocą elementu CSS lub HTML na ścieżkach SVG.

SVG jest lekki i może być używany do tworzenia ostrej grafiki niezależnie od rozmiaru ekranu, poziomu powiększenia i rozdzielczości ekranu. Dzięki SVG dostarczanie nowoczesnych, żywych wrażeń jest teraz łatwiejsze niż kiedykolwiek, a wszystko to przy jednoczesnym czerpaniu korzyści z używania standardowych technologii internetowych.

I to wszystko! Mam nadzieję, że ten samouczek dotyczący animacji SVG okazał się przydatny i podobał ci się jego czytanie.

Dalsza lektura na blogu Toptal Engineering:

  • Jak podejść do animacji SVG w CSS