SVGator – narzędzie do tworzenia animacji SVG (pakiet darmowy)

Zostało przede mną postawione zaanimowanie parunastu ikon SVG. Szybki research po kilku portalach do nauki wykazał, że trzeba będzie sporo podłubać. Znalazłem jednak o wiele prostszą metodę do animowania plików SVG – SVGator, jest również darmowy pakiet, który starcza naprawdę do sporej ilości animacji.

W czasie, gdy przygotowywałem set animacji SVGator zmienił swoje plany abonamentowe. Wcześniej za darmo były tylko 3 projekty 3 sekundowe dostępne przez 14 dni (trial). Teraz w darmowym pakiecie znajdują się 3 nowe projekty na miesiąc ograniczone do 10 sekund, bez ograniczenia czasowego.

Jeśli miałeś styczność z dowolnym programem do montażu wideo lub jakiejkolwiek animacji w chwilę odnajdziesz się w SVGator. Jeśli nie miałeś, może zająć Ci to dwie chwile. Interfejs jest naprawdę prosty.

Ładujemy plik, mamy możliwość wprowadzania podstawowych korekt oraz dodawania nowych kształtów czy też ścieżek oraz ich edycji. Plik podzielony jest na warstwy, z którymi możemy pracować.

Wybieramy interesującą nas warstwę, dodajemy ją na oś czasu, definiując jakiego typu ma być to animacja, wyznaczamy keyframe, wybieramy metodę ruchu pomiędzy klatkami i to właściwie tyle. Oczywiście działać możemy na wielu warstwach z wieloma typami animacji oraz metodami ruchu. Osiągnąć da się w nim naprawdę sporo w dość krótkim czasie.

Animację możemy zapętlić oraz wyeksportować przy użyciu czystego CSSa lub JavaScriptu. Do projektu, nad którym działam, potrzebowałem, aby kolor animacji był konfigurowalny przy użyciu zmiennych koloru z SCSSa. Na ten moment klasy do kształtów oraz ścieżek trzeba dodawać ręcznie. Skontaktowałem się z twórcami i w najbliższym releasie będzie to dostępne w narzędziu (z końcem września).

Poniżej przykład animacji, którą udało mi się zrobić w około 5-10 minut.

Sam spędzę tam w najbliższych tygodniach sporo czasu. Na pewno wrócę z szerszym tutorialem lub może nawet czymś więcej. Gdyby nie zmiana opcji abonamentowych zapewne wstrzymałbym się z polecaniem tego narzędzia, jednak aktualnie wydaje mi się ono warte sprawdzenia.