Animowanie plików SVG za pomocą SVGator

( Ten artykuł jest sponsorowany przez SVGator .) Animowane pliki SVG stały się bardzo popularne. Są całkowicie skalowalne (ponieważ są wektorami), małe i w 100% oparte na kodzie, co pozwala na tak wiele przekształceń i poprawek. Ma to jednak swoją cenę: stroma krzywa uczenia się dla zupełnie początkujących.

SVGator zobowiązuje się do rozwiązania tego problemu, ułatwiając każdemu tworzenie prostych animacji przy użyciu znanego interfejsu. Jest to internetowa aplikacja do animacji, która umożliwia importowanie, animowanie i eksportowanie animacji SVG, a także eliminuje potrzebę nauki programowania przez początkujących. Próbowaliśmy i naprawdę nam się podobało.

Zacznij korzystać z aplikacji

Udaj się na https://www.svgator.com, aby rozpocząć korzystanie z aplikacji. Proces rejestracji jest dość prosty (rysunki od 1 do 3): Kliknij „Animuj teraz”, a następnie „Utwórz konto”, wpisz swoje dane i gotowe.

Zostaniesz przeniesiony bezpośrednio do przykładowego projektu „Stopwatch”, który pozwoli Ci poznać funkcje SVGator. Jeśli nie możesz znaleźć swojej drogi w aplikacji, dostępny jest zgrabny samouczek (rysunek 4), który poprowadzi Cię, jak zacząć z niej korzystać: zaimportuj statyczny plik SVG, dodaj elementy do osi czasu i dodaj animatorów do elementów i klatek kluczowych do animować cztery aktualnie dostępne właściwości (skala, krycie, położenie i obrót).

Jeśli kiedykolwiek korzystałeś z aplikacji do animacji, interfejs użytkownika SVGator powinien być ci całkiem znajomy i prawdopodobnie wszystko będzie na swoim miejscu. Dodajesz tylko te elementy, które będziesz animować, dzięki czemu oś czasu jest czysta i łatwa do skanowania.

Projekt animowanego zegara startowego świetnie się spisuje, wprowadzając Cię do SVGator. Zawsze możesz do niego wrócić i wykorzystać go jako punkt odniesienia.

Teraz, gdy mamy już podstawy, przejdźmy do tworzenia własnych animacji!

Co zrobimy

Sprawdź tę prostą ikonę koperty, którą zaprojektowaliśmy w Sketch (rysunek 5). Zaczyna się zamknięta, potem otwiera się i wyskakuje list, a po nim jego treść. Następnie litera wyskakuje z koperty i powiększa się, pokazując zielone pole wyboru.

Oto podsumowanie procesu:

• Zaczniemy od stworzenia prostego scenorysu, aby zwizualizować naszą ikonę w różnych stanach. W tym czasie będziemy stale synchronizować się z SVGatorem i importować elementy ikony, aby upewnić się, że wszystko działa zgodnie z oczekiwaniami.
• Następnie utworzymy główną kopię ikony, która będzie zawierała każdy potrzebny nam element, i wyeksportujemy ją do SVGator. Być może będziemy musieli często modyfikować tę kopię główną w trakcie całego procesu.
• Następnie wykonamy całą animację w jednym projekcie SVGator i wyeksportujemy ją, upewniając się, że działa zgodnie z oczekiwaniami.
• Na koniec umieścimy ikonę w prostym, wstępnie zakodowanym formularzu biuletynu, aby zobaczyć, jak wygląda w prawdziwym środowisku internetowym. Zobaczymy też, jak zmienia się rozmiar dla mniejszych rozdzielczości.
• Wszystko możesz pobrać tutaj.

Zacznijmy!

Część 1: Utwórz i wyeksportuj ikonę ze szkicu

• Istnieją pewne różnice między projektowaniem prostej ikony SVG a projektowaniem ikony SVG, którą planujesz później animować. Na początek ważne jest, aby pamiętać, że powinien on składać się z dość prostych kształtów i powinieneś planować animacje wokół prostych przejść opartych na manipulowaniu tylko następującymi elementami: skalą, obrotem, położeniem i przezroczystością. Są to jedyne cztery właściwości, które SVGator obecnie pozwala animować, więc jeśli naszkicowałeś coś bardziej złożonego, nie będziesz w stanie tego zrobić.

Stwórz prosty storyboard, aby zaoszczędzić czas

Tworzenie scenorysów umożliwia wizualizację wszystkich przejść, zanim zaimportujesz je do SVGator. Ułatwia również testowanie transformacji przed przystąpieniem do tworzenia całej animacji. Często zdarza się, że odkryjesz problem z ilustracją, który powinien być zrobiony inaczej w Sketchu, więc musisz wrócić i to zmienić. Następnie musisz ponownie zaimportować cały plik w SVGator i zacząć od animacji od zera. Ponieważ nie chciałbyś robić tego za każdym razem, tworzenie scenorysów pomaga, zmuszając Cię do planowania rzeczy z wyprzedzeniem.

Na przykład początkowo planowałem, aby obwiednia pozostawała bardziej w dolnej części ekranu, ale po zaimportowaniu jej do SVGator i zabawie z zamykaniem i otwieraniem, jasne było, że musi pozostać na środku, gdy jest zamknięta i lekko w dół, gdy open — szczegół, który został pominięty na statycznych obrazach.

Wskazówka: sprawdź scenorys w pliku szkicu → Artboard „scenorys” .

Nazewnictwo i organizacja warstw

Jeśli nazwiesz swoje warstwy w Sketch, będą one działać zgodnie z oczekiwaniami, a wszystkie nazwy przypisane w Sketch zostaną przeniesione do twojego projektu w SVGator. Ale jeśli użyjesz SGO Compressor lub podobnej wtyczki, aby zmniejszyć pliki SVG, nazwy znikną , a SVGator zastąpi je tymi opartymi na tagu HTML, a otrzymasz coś podobnego do tego, co pokazano na rysunku 7. .

Wskazówka: Jeśli używasz już narzędzia SVO Compressor dla innych plików SVG i nie chcesz go wyłączać, po prostu przeciągnij i upuść plik z obszaru podglądu eksportu w Sketch do wybranej lokalizacji (rysunek 8). Pozwoli to obejść kompresor SVO i wyeksportować plik SVG bez zmian!

Używanie grup jest również świetne, ponieważ aplikacja je rozpoznaje, a nawet możesz jednocześnie animować warstwę i jej grupę nadrzędną, dodając nieco więcej złożoności.

Nie napotkaliśmy żadnych ograniczeń dotyczących liczby używanych warstw, ale z drugiej strony nasza ikona jest dość prosta.

Przygotowanie ikony do animacji

Teraz, gdy mamy pomysł w scenorysie i przygotowaliśmy plik główny, wyeksportujmy go w sposób, który możemy zrozumieć w SVGator. Pamiętaj, aby dokładnie sprawdzić hierarchię warstw. Zastanów się, jak dana warstwa będzie współdziałać z inną i gdzie powinna zostać umieszczona w panelu Warstwy. Na rysunku 9 zobaczysz, że wybraliśmy „top_opened” — to jest otwarta górna klapka koperty. Powinien stać za białą kartką papieru. I odwrotnie, „top_closed” to zamknięta klapka koperty, która powinna znajdować się na wierzchu wszystkiego; dlatego jest to pierwsza warstwa w naszej grupie „treści”.

Wskazówka: możesz się zastanawiać, dlaczego cała górna klapa składa się z dwóch warstw. Dzieje się tak, ponieważ nie możemy obracać kształtów ani naprawdę przekształcać ich w przestrzeni 3D za pomocą SVGator. Naśladujemy to, zgniatając pierwszą warstwę, a następnie rozciągając drugą, tworząc w ten sposób iluzję transformacji 3D .

Jeśli spojrzysz na nasz storyboard, pierwotnym pomysłem było wyskoczenie arkusza z koperty i zwiększenie skali, aby ostatecznie go ukryć. Osiągniemy to, przesuwając oryginalny arkusz do góry, mając jednocześnie ukryty arkusz („sheet_top”) przed kopertą (rysunek 10). W momencie, gdy spotkają się w najwyższym punkcie, zamienią się, a przednia kartka spadnie przed kopertę. To też jest iluzja wizualna — tak naprawdę nie możemy przesuwać arkusza w przestrzeni Z, więc jest to jeden ze sposobów na jego emulację.

Biorąc to wszystko pod uwagę, możemy teraz wyeksportować ikonę. Jest to praktycznie pojedynczy plik SVG, który zawiera wszystkie potrzebne nam elementy, ułożone jeden na drugim w użyteczny sposób.

Wskazówka: upewnij się, że wszystkie elementy są zaznaczone jako widoczne (nie ukryte) przed eksportem. Możesz spojrzeć na plik, którego użyliśmy jako eksport w pliku Sketch → Artboard „export” .

Część 2: Animowanie ikony

Otwórz SVGator i kliknij „Importuj nowy”, aby rozpocząć nowy projekt (rysunek 11):

Jeśli zrobiłeś wszystko poprawnie, powinieneś zobaczyć coś takiego jak rysunek 12 i krótki klip poniżej (klip 1): wszystkie warstwy ułożone jedna na drugiej i gotowe do użycia. Jeśli przypadkiem nie widzisz wszystkiego, wróć do Sketch i sprawdź, czy wszystkie warstwy są widoczne.

Animowanie otwarcia koperty

Zaczniemy od zaimportowania niektórych elementów na osi czasu. Sposób działania SVGator polega na tym, że zaczniesz z pustą osią czasu. Wybierasz elementy do dodania z menu „Elementy”. Będziesz musiał sprawdzić je ręcznie za pomocą ikony oka, aby zobaczyć, której warstwy szukasz. Alternatywnie możesz kliknąć bezpośrednio element na ekranie, co zrobi to samo.

Będziemy pracować nad krokami 1 i 2 ze storyboardu, a konkretnie nad otwarciem klapy. Wyłączmy warstwy, których na razie nie potrzebujemy; wrócimy do nich później (zobacz klip 1, aby zobaczyć, jak to zrobić). Powinniśmy pozostać tylko z podstawową kopertą, co oznacza, że ​​należy wyłączyć następujące warstwy: „sheet_top_content”, „sheet_top_bgr” i „sheet_bottom_bgr”.

Następnie kliknij „top_opened” i kliknij ikonę plusa po lewej stronie lub kliknij dwukrotnie element, aby dodać go do osi czasu. Zrób to samo dla „top_closed”. Teraz powinieneś mieć obie warstwy na osi czasu (rysunek 13).

Wskazówka: jeśli chcesz szybko przejść przez cały proces, obejrzyj klip 2 (działania mogą nie być w tej samej kolejności, w jakiej opisano poniżej) .

• Kliknij „top_closed” na osi czasu, a następnie menu „Animatorzy”. Dodaj animatora skali.
• Dodaj animatora skali dla „top_opened”.
• Następnie kliknij małą ikonę celu obok nazwy warstwy na osi czasu. Jest to właściwość transform-origin, która pozwala ustawić punkt obrotu dla transformacji elementu. Wybierzmy górny środek dla „top_closed”, ponieważ zamierzamy zmniejszyć go w górę (rysunek 14), a następnie dolny środek dla „top_opened”.
• Teraz, po wybraniu opcji „top_closed”, kliknij znak plus we właściwości Scale, aby dodać klatkę kluczową do osi czasu. Na osi czasu pojawi się żółty kształt rombu. Przejdźmy do 0,4 s i ponownie kliknij znak plus (rysunek 15). Ta druga klatka kluczowa będzie naszym ostatnim punktem transformacji, gdy klapka już się otworzy. Ustawmy więc jego Skalę 100% na 0%, pozostawiając pierwszą klatkę kluczową jako 100% 100%.
• Włącz ułatwienie dla „top_closed”, klikając małą ikonę celu obok nazwy warstwy (rysunek 16).
• W 0.4 s dodaj klatkę kluczową Krycie dla „top_closed”, klikając dwukrotnie Krycie w menu „Animatory”, a następnie klikając znak plus obok właściwości Krycie na osi czasu. Zmień go na 0%.
• Cofnij się o kilka klatek i dodaj 100% dla krycia. Robimy to, aby uniknąć trzasków w górnej części klapy.

Wskazówka: wygładzanie sprawi, że ruch będzie wyglądał bardziej naturalnie, a ponieważ projektujemy animację, która naśladuje ruch pojedynczego elementu, naturalne jest luzowanie — na początku i luzowanie na końcu animacji .

Zajmijmy się teraz częścią „top_opened”, czyli zakończeniem animacji. Jak zauważyliśmy wcześniej, robimy to w dwóch częściach, aby naśladować otwieranie klapy w 3D.

• Chwyć warstwę „top_opened” na osi czasu, przejdź do 0,4 s na osi czasu i dodaj klatkę kluczową Skala, a następnie kolejną klatkę kluczową w 0,8 s . Ustaw Skalę przy 0,4 s na 100% 0% i pozwól, aby wartość Skali 0,8 s pozostała 100% 100%.
• Włącz Łagodzenie. Naciśnij przycisk odtwarzania, aby wyświetlić podgląd animacji.

Wygląda fajnie, ale teraz cała koperta musi przesunąć się w dół, aby zmieściła się w zakreślonym tle. Znajdź grupę o nazwie po prostu „g” w Elementach i dodaj do niej animatora pozycji. Dodaj klatkę kluczową pozycji do 0,2 s, a następnie do 0,8 s. Zmień wartość 0,8 s na 0 35. Dodaj Spokojność, aby uzyskać płynną animację. I to wszystko! Z powodzeniem animowaliśmy otwartą kopertę, a nawet przesunęliśmy ją nieco w dół.

Dodawanie złożoności: wyskakuje list

Otwieranie koperty jest zgrabne, ale możemy ją uatrakcyjnić wprowadzając kartkę papieru. Aby to zrobić, musimy odsłonić warstwę arkusza, którą nazwaliśmy „sheet_bottom_bgr”.

• Kliknij ikonę oka obok „sheet_bottom_bgr” w menu „Elementy”, aby była widoczna. Dodaj go do osi czasu (kliknij dwukrotnie).
• Teraz przejdź gdzieś w środku animacji — na przykład 0,5 s — i dodaj klatkę kluczową Pozycja. Dodaj kolejny po 0,4 s. Wybierz pierwszą klatkę kluczową i przesuń warstwę o 140 pikseli na osi y (0 140).
• Dodaj efekt odprężenia. Teraz mamy trochę ciekawszą animację.

Wskazówka: jeśli wolisz obejrzeć to na filmie, obejrzyj klip 3 poniżej .

Jeszcze większa złożoność: animowanie skalowania litery

Idąc dalej, animujmy list wyskakujący z koperty i pokażmy kilka linijek tekstu „zapisanego” w liście. Aby to zrobić, będziemy musieli nieco zmodyfikować poprzednią animację. (Jeśli chcesz przewinąć do przodu, możesz po prostu obejrzeć screencast i powtórzyć go).

• Zacznij od przeniesienia ostatniej klatki kluczowej pozycji „sheet_bottom_bgr” z 0,9 s na 1,1 s i zmień ją na 0 -190. Wyjmujemy z tym arkusz z koperty, aby móc szybko zamienić go na inny, który już przygotowaliśmy.
• Przejdź do 1.1 s, włącz „sheet_top_content” i „sheet_top_bgr” i dodaj je do osi czasu za pomocą klatek kluczowych pozycji dla obu z zakresu 0-190.
• Dodaj klatki kluczowe w 1,5 s i ustaw je na 0 40.
• Włącz opcję Ease-out dla obu.

Jest to ruch przedniej części arkusza i powinien wyglądać tak, jak na rycinie 17.

Teraz naprawmy tylny arkusz. Powinno zniknąć, gdy pojawi się przód, a przednia strona powinna pojawić się dopiero po tym.

• Przejdź do 1.1s i wybierz „sheet_bottom_bgr”. Dodaj animator krycia i klatkę kluczową. Ustaw go na 0%.
• Przesuń jedną klatkę do tyłu i ustaw kolejną klatkę kluczową Opacity, dzięki czemu będzie to 100%.

Wprowadźmy również odpowiednie zmiany na przedniej stronie:

• Przejdź do 1.1 s, wybierz „sheet_top_bgr” i dodaj klatkę kluczową krycia 100%.
• Przesuń ramkę do tyłu i ustaw krycie 0%.

Powinieneś zobaczyć coś takiego jak rysunek 18 poniżej. Dostrzegamy tu dwa problemy:

• Treść jest wyświetlana na górze koperty, zanim nastąpi przejście.
• Występuje usterka podczas zamiany tylnego i przedniego arkusza.

Naprawmy pierwszy problem. Ukryjmy treść i pole wyboru i pokażmy je po pojawieniu się przedniej strony.

• Przejdź do 1,5 s, wybierz „sheet_top_content” i dodaj klatkę kluczową krycia 100%.
• Cofnij się o klatkę i ustaw kolejną klatkę kluczową Opacity na 0%.
• Teraz uczynimy to nieco bardziej interesującym, animując każdą warstwę w przedniej treści.
  • Przejdź do 1.5s i wyszukaj zawartość „sheet_top_content” w menu Elementy.
  • Dodaj klatki kluczowe Opacity dla wszystkich trzech warstw w „sheet_top_content”.
  • Ustaw krycie dla wszystkich trzech warstw na 0%.
  • Przejdź do 1,7 s i ustaw na 100% dla wszystkich trzech warstw.
  • Pozostań przy 1,7 s, wybierz Połączony kształt i dodaj klatkę kluczową Obróć.
  • Przejdź do 1.5s i ustaw obrót na -45°.
  • Dodaj łatwość rotacji.

Druga sprawa to usterka, która pojawia się, ponieważ nasza tylna prześcieradło znika zbyt wcześnie.

• Przejdź do 1.1 s, wybierz „sheet_bottom_bgr” i przesuń klatki kluczowe Opacity o jedną klatkę do przodu. Oto, na co powinieneś zwrócić uwagę (rysunek 19):

Aby było bardziej atrakcyjnie, przeskalujmy przednią stronę i zawartość, gdy wyskoczy z koperty. Moglibyśmy przeskalować cały „top_sheet_content”, ale może to spowodować pewne rozbieżności w niektórych przeglądarkach. Najlepiej jest samodzielnie skalować każdą z jej warstw podrzędnych.

• Przejdź do 1.1s, wybierz „sheet_top_bgr” i dodaj klatkę kluczową Scale.
  • Zrób to samo dla Combined-Shape, „line_top” i „line_bottom”.
• Przejdź do 1,5 s i dodaj kolejną klatkę kluczową Scale z wartościami 120% 120%.
  • Zrób to samo dla Combined-Shape, „line_top” i „line_bottom”.
• Włącz łatwość wychodzenia.
• Ponieważ go przeskalowaliśmy, musimy zmniejszyć o ile cała przednia kartka przesuwa się w dół. Przejdź do 1.5s, wybierz „sheet_top_content” i „sheet_top_bgr” i zmień ich pozycję z 0 40 na 0 20.

Wskazówka: skalowanie zawartości w SVG jest w porządku, ponieważ jest ona oparta na wektorach, więc nie stracisz żadnej jakości .

Oto jak powinien wyglądać teraz (rysunek 20):

Wszystko dobrze, ale cała animacja musi wrócić do pierwszej klatki. To dlatego, że chcemy go ponownie wykorzystać. Naszym pomysłem jest zsunięcie przedniej strony w dół, zamknięcie koperty i obrócenie jej do pierwotnej pozycji.

• Przejdź do 2,8 s, wybierz „sheet_top_bgr” i dodaj klatki kluczowe pozycji.
  • Zrób to samo dla „sheet_top_content”.
• Musimy dodać więcej czasu, ponieważ domyślna oś czasu to 3s. Kliknij ikonę koła zębatego w lewym dolnym rogu nad osią czasu, zmień czas trwania na 00:04:50 (rysunek 21) i naciśnij „Enter”. Rozszerzyliśmy teraz oś czasu.
• Przejdź do 3,6 s, dodaj kolejną parę klatek kluczowych pozycji i ustaw ich wartości na 0 360. Zmień wygładzanie dla pozycji obu warstw na Ease-in-out.

• W 1,3 s wybierz „top_closed” i „top_opened” i dodaj klatki kluczowe Scale.
• Dodaj jeszcze dwa po 1,5 s. W przypadku drugich klatek kluczowych „top_closed” powinno mieć 100% 100%, a „top_opened” 100% 0%. Pomyślnie zamknęliśmy klapkę za łuską.
• Teraz wystarczy przesunąć kopertę z powrotem na środek i upewnić się, że górna klapka znów się pojawiła. Przejdź do 3s i dodaj klatkę kluczową pozycji dla „g”. Dodaj kolejny w 3,4 s i ustaw 0 0. Przejdź do 2,8 s i dodaj klatkę kluczową krycia 0% dla „top_closed”. Następnie przejdź do 3s i zmień krycie na 100%.

Gratulacje! Animowaliśmy całą ikonę. Oto jak powinien wyglądać (rysunek 22):

Część 3: Implementacja wyeksportowanej animacji w prawdziwym środowisku internetowym

Umieśćmy ikonę w rzeczywistym środowisku. Zakodowaliśmy prosty formularz newslettera i umieściliśmy tam ikonę. Możesz wyeksportować ikonę z SVGator, klikając „Eksportuj SVG”.

Po kliknięciu przycisku „Subskrybuj” zostanie wyświetlony komunikat z podziękowaniem i rozpocznie się animacja ikony.

Działa dzięki dwóm ikonom SVG: pierwsza jest statyczna i zawiera tylko pierwszą klatkę animacji, a druga jest animowaną. Ikonę statyczną można znaleźć w pliku szkicu → Obszar roboczy „eksportuj statyczne”. Umieściliśmy go jako wbudowany element SVG w kodzie. Dołączyliśmy również animowany obraz SVG, ale domyślnie go ukryliśmy. Możesz sprawdzić kod w pobraniu. Gdy „Subskrybuj” otrzyma kliknięcie, ukrywamy statyczny SVG i pokazujemy animowany, który uruchamia się automatycznie.

Drobną poprawką, którą wprowadziliśmy w statycznym SVG, było zastąpienie tej linii:

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… z tym:

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

Spowoduje to usunięcie szarego prostokąta, który jest nieprawidłowo wyświetlany na wszystkich elementach.

Ten przykład pokazuje również, jak dobre SVG są w projektowaniu responsywnym: jeśli zmniejszysz okno, układ zmieni się, a ikona powiększy się bez utraty jakości.

Wskazówka: gdy zmniejszyliśmy ikonę, okazało się, że arkuszowi zajmuje zbyt dużo czasu, aby wydostać się z płótna, więc musieliśmy cofnąć się i nieco zmienić ten konkretny czas, aby go skrócić. Przesunęliśmy ostatnie klatki kluczowe Position z „sheet_top_bgr” i „sheet_top_content” do 3,2 s, aby przyspieszyć ruch .

Jeśli chcesz, możesz dostosować animację nawet po jej wyeksportowaniu, ale znacznie łatwiej jest to zrobić w SVGator, gdzie masz wygodny interfejs użytkownika.

Wniosek

Jesteśmy bardzo podekscytowani narzędziami takimi jak SVGator, które naprawdę przyspieszają proces tworzenia prostych animacji SVG. Jest łatwy w użyciu i błyskawicznie uzyskasz świetnie wyglądającą animację.

• Nie jest tak potężny jak Adobe After Effects, ale jest o wiele bardziej adaptacyjny i eksportuje wszystko w kodzie, gotowe do użycia w Internecie. W porównaniu do After Effects to jabłka i pomarańcze, ponieważ oba narzędzia są tak różne.
• Używając SVGator do szybkich eksploracji , początkujący dostrzegą w nim większą wartość, ale to nie znaczy, że jest skierowany tylko do nich. Zaawansowani użytkownicy mogą używać tego narzędzia do burzy mózgów lub szybkiego odkrywania pomysłów bez konieczności korzystania z bardziej złożonego narzędzia. Ponieważ SVGator generuje kod, możesz go stamtąd pobrać i dostosować do swoich potrzeb. Jedyną wadą jest to, że cała animacja jest umieszczona na jednej osi czasu, co oznacza, że ​​jest to w zasadzie jedna animacja CSS, a wszystko, co dzieje się w środku, ma różne opóźnienia przed uruchomieniem. Oznacza to, że nie możesz obecnie uruchamiać zdarzeń na niektórych etapach animacji, ponieważ wszystko jest w jednym CSS.
• Porównywanie go z waniliowym kodem również nie jest sprawiedliwe, ponieważ głównym celem SVGator jest ułatwienie i przyspieszenie animacji SVG. Oczywiste jest, że możesz osiągnąć więcej, jeśli zakodujesz całość od zera, ale ile czasu zajęłoby ci to?
• Jedną z największych zalet SVGator jest to, że jest bardzo przyjazny dla początkujących. Każdy może zacząć z niego korzystać, a krzywa uczenia się jest prawie żadna, jeśli masz doświadczenie z przynajmniej niektórymi programami do projektowania lub animacji.
• Wszyscy użytkownicy otrzymują siedmiodniowy bezpłatny okres próbny po utworzeniu konta. Wszystkie funkcje są uwzględnione, a po zakończeniu okresu próbnego nadal mogą pobierać animacje z sekcji „Moje projekty”. Możesz subskrybować aplikację co miesiąc (18 USD miesięcznie), kwartalnie (45 USD na kwartał) lub rocznie (144 USD rocznie).

Dalsza lektura o SVGator

• Jak animować SVG za pomocą SVGator (wideo)
• Twitter SVGator (zawiera wiele mini-samouczków i częste aktualizacje dotyczące aplikacji)
• Często zadawane pytania dotyczące SVGatora

Dalsza lektura o animacji SVG przy użyciu kodu

• „Jak przestałem się martwić i nauczyłem się animować SVG”, Boaz Lederer, Medium
• „Jak zoptymalizować kod SVG i animować ikonę SVG za pomocą biblioteki CSS i Snap.svg”, CodyHouse
• „Animacje CSS dla nie-programistów, część 2 — SVG”, Nicholas Kramer, Prototypr
• „Jak łatwo tworzyć piękne animacje SVG”, Lewis Menelaws, Medium

Specjalne podziękowania dla Boyana Kostova za pomoc w tym artykule — dziękujemy za Twój czas i wysiłek!