Grafika wektorowa przejmuje teraz Internet, a nawet aplikacje mobilne. Ikony, przyciski i elementy stron internetowych lub aplikacji mobilnych stają się teraz w coraz większym stopniu oparte na wektorach, upuszczając bitmapy z powodu konieczności renderowania na wszystkich rodzajach rozdzielczości ekranu, dpi, współczynników itp., A także z powodu przydatnej możliwości „powiększania” lepsze czytanie stron w przeglądarkach mobilnych sprawiło, że zasoby bitmap są już brzydkie i nie nadają się do użytku.

Czas więc zacząć tworzyć animowane ikony, tła i elementy sterujące w SVG, ale jak animować pliki SVG?

Wiele odpowiedzi znajduje się również w powiązanym pytaniu na temat animowania ilustracji w Internecie.

Unikaj animacji SMIL

Sara Soueidan, prawdopodobnie najlepsza animatorka plików SVG w Internecie, napisała: „Wiem, że napisałam przewodnik po animacjach SMIL, ale widząc ich przyszłość, nie używam ich osobiście”. Ty też nie powinieneś.

Animacje SMIL nie działają w żadnej przeglądarce IE, Edge, niektórych przeglądarkach mobilnych i są stopniowo upuszczane przez Chrome / Operę (choć ostatnio zespół Chrome stwierdził, że to wycofanie jest tymczasowo zawieszone ). Powinieneś unikać używania ich przez 99% czasu.

Użyj CSS do bardzo prostych animacji

SVG może być w dużej mierze animowane przy użyciu czystego CSS (w tym przy użyciu :hoverstanów, transforms, transitions i animations). Jest planowane, aby uzyskać pełną obsługę animacji CSS , ale obecnie tylko niektóre są obsługiwane i mogą być buggy z kwestiami poprzecznych przeglądarki.

Sara Soueidan twierdzi, że CSS świetnie nadaje się do animacji SVG, ale woli JS, ponieważ pomaga rozwiązać te problemy z przeglądarkami. Jako taki, użyj go, gdy możesz wrócić do JS, gdy animacje są bardziej złożone lub nie działają w różnych przeglądarkach.

Użyj animacji JavaScript, jeśli CSS nie działa

W większości przypadków pliki SVG można animować za pomocą małego kodu JavaScript bez potrzeby korzystania z biblioteki animacji JavaScript. Animacja w JS ma znacznie większą obsługę wielu przeglądarek i jest dość łatwa w użyciu z pewnym podstawowym zrozumieniem.

W przypadku złożonych animacji wymagających użycia osi czasu lub czegoś podobnego bardzo pomocne może być użycie biblioteki takiej jak GSAP . Istnieje wiele innych bibliotek animacji SVG, Snap.svg to kolejna duża biblioteka, ale większość nie obsługuje animacji tak łatwo lub tak wydajnie jak GSAP.

W przypadku określonych rodzajów animacji użycie konkretnej wtyczki JS, takiej jak MorphSVG firmy GSAP, może zaoszczędzić sporo czasu, ponieważ zajmują się problemami z różnymi przeglądarkami i wszystkimi obliczeniami. Jednak większość animacji nie wymaga takich wtyczek. Aby uzyskać więcej informacji, zobacz „Przewodnik po alternatywach dla funkcji SMIL” .

Dopuszczalne jest również stosowanie wieloskładników w SMIL, ale jestem zmęczony, ponieważ nie są one zbyt szeroko stosowane / testowane. Biorąc to pod uwagę, Eric Willigers i FakeSmile są dwoma najczęściej występującymi.

Obróbka

Jedyne oprogramowanie, na które natrafiłem, które eksportuje do SVG + JS, to wtyczka Adobe After Effects o nazwie Lottie (wcześniej Bodymovin), rozszerzenie Flash o nazwie Flash 2 SVG oraz małe narzędzie online o nazwie SVG Circus . Poza tym animatorzy oprogramowania, tacy jak Adobe Edge Animate, Adobe Animate CC lub Animatron eksportują do animacji SMIL, których nie należy używać. W związku z tym najlepiej jest, aby jakiś programista tworzył animacje SVG + CSS lub SVG + JS przy użyciu eksportowanych plików SVG z edytora . Inkscape ma świetne samouczki dotyczące łączenia zasobów i przykłady, jak to zrobić.

Jestem pewien, że w przyszłości więcej oprogramowania do animacji będzie obsługiwać eksport do SVG + JS.

Kilka innych ważnych uwag

• Ważne jest, aby pamiętać o wydajności . Sara Drasner stworzyła kilka testów wydajności dla SVG, które pokazują, że powinieneś wybrać akcelerację sprzętową animacji CSS, gdy tylko jest to możliwe, ale powróć do dobrego podejścia JavaScript, gdy nie jest to możliwe.

• Najlepiej jest używać plików SVG w <object>tagu lub osadzonych bezpośrednio w <svg>elemencie XML, jeśli jest on interaktywny, i jako obraz tła, jeśli nie jest interaktywny, ale istnieją też inne sposoby na to .

Aby zobaczyć cały widok animacji internetowych, przeczytaj post Rachel Nabor w części A List . Jeśli chodzi o dodatkowe sugestie dotyczące narzędzi, ten post jest bardzo pomocny, chociaż nie zgadzam się ze wszystkimi sentymentami, szczególnie z tym, jak prezentuje animacje SMIL.

Zawsze uważałem, że poleganie na czymkolwiek innym niż biblioteki JS to ogromne wsparcie / konserwacja WRT.

Zawsze stosować D3.js . Pierwotnie został stworzony do tworzenia interaktywnych elementów SVG / DOM z zestawów danych. Możesz jednak zmodyfikować SVG / DOM, który jest zawarty na stronie, o ile JS ma do niego dostęp.

Korzystam z różnych projektów do tworzenia / animacji SVG / DOM. niektóre przykłady obejmują miękkie pulpity nawigacyjne w czasie rzeczywistym, wizualizacje map, transformacje DOM oraz tworzenie plików SVG w celu włączenia do plików PDF. Widziałem to również w Internecie. Witryna zawiera wiele przykładów i linki do stron, które z niej korzystały.

Polecam, ponieważ jest dość kompatybilny z wieloma przeglądarkami, ma aktywną społeczność i jest łatwy do nauczenia. Spójrz na stronę internetową i zwróć uwagę na rzeczywiste zastosowania, aby zobaczyć małą próbkę tego, co możesz z tym zrobić.

Oto możliwe sposoby animacji svg:

ANIMACJE SVG SMIL

SVG można animować za pomocą potężnego języka znaczników SMIL, eksportowanego bezpośrednio z narzędzi do animacji, takich jak wtyczka Adobe Animate CC + flash2svg.

Aby animować SVG z SMIL, nawet w przeglądarkach nieobsługujących, wystarczy użyć wypełnienia SMIL.

Polyfill to specjalny fragment kodu javascript, który zapewnia obsługę funkcji brakujących w przeglądarce, tłumacząc oryginalne kodowanie na takie, które przeglądarka może zrozumieć.

Wielokrotne wypełnienie SMIL wykonane przez Erica Willigersa robi to: przekształca SMIL w API Web Animations API, które obsługuje nawet przeglądarka Microsoft. Jest tak wydajny, że programiści Google Chrome postanowili porzucić natywną obsługę SMIL i skupić się na animacjach internetowych, pozostawiając Ericowi Willigersowi zadanie wypełniania plików SMIL w Chrome.

Ktoś błędnie zinterpretował to jako wycofanie SMIL przez Chrome i skrytykował twórców tego wyboru. Ale to nie była prawdziwa deprecjacja, tylko przeniesienie pracy polegającej na interpretacji SMIL na poziomie wielu wypełniaczy.

W rzeczywistości Chrome twórcy sami cytowali wypełnienie Willigers w bardzo oficjalnym ogłoszeniu o swoim zamiarze zaniechania SMIL.

Więc jeśli czytasz w Internecie o śmierci SMIL, nie martw się. „Śmierć” SMIL była bardzo przesadzona. To bardziej jak odrodzenie.

Aby używać SMIL we wszystkich przeglądarkach, w tym IE i EDGE, wystarczy dodać tę polifill javascript do swojej strony internetowej:

https://github.com/ericwilligers/svg-animation

Oto strona demonstracyjna wykorzystująca wypełnienie wykonane przez Toma Byrne'a, autora popularnego eksportera flash2svg:

strona bez wypełnienia:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

i ta sama strona z polifillem:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Jeśli spojrzysz na źródło, jest to dość oczywiste.

Również wydajność z polifillem jest często lepsza niż oryginalny SMIL, ponieważ w wielu przeglądarkach Web Animacje są przyspieszane sprzętowo, podczas gdy SMIL zwykle nie.

ANIMACJE EKSPORTOWE W SVG SMIL

Prostszym sposobem tworzenia animacji SVG jest użycie narzędzi takich jak Adobe Animate CC do ich narysowania oraz wtyczek takich jak Flash2svg ( https://github.com/TomByrne/Flash2Svg ) w celu wyeksportowania ich do SVG. Za jego pomocą możesz wyeksportować prawie wszystkie animacje + dźwięk jako pojedynczy plik SVG, na przykład ten odcinek animowany:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

BIBLIOTEKI JS ANIMATION SVG

Sposób javascript jest bardziej skomplikowany. Przede wszystkim musisz być programistą javascript. Następnie musisz wybrać między wieloma bibliotekami. Bardziej popularne są:

• SnapSVG http://snapsvg.io
  Ta biblioteka jest następcą starej i popularnej biblioteki animacji Raphaela autorstwa tego samego autora. Bardzo stabilny, ale konwertuje SVG w formacie wewnętrznym w czasie wykonywania, aby go animować. Opcje morfowania są również bardzo proste, tylko interpolacja liniowa. (UWAGA: Istnieje również wtyczka snap.svg dla Adobe Animate CC, ale eksportowane pliki są rozdęte. Eksporter tworzy jedno polecenie sapg snap dla każdej klatki animacji, nie każdej klatki kluczowej, tworząc plik svg o wielkości 18 KB z ponad 1000 liniami kodu, wystarczy obrócić prosty prostokąt o 360 stopni. Wtyczka Flash2svg jest znacznie wydajniejsza, wystarczy jedno polecenie i kilka bajtów do wykonania tej samej pracy).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  W pełni funkcjonalna biblioteka morfingowa, która pozwala na łatwą animację SVG bez konieczności konwertowania ich do formatu wewnętrznego. Wystarczy utworzyć 3-4 klatki kluczowe SVG w Inkscape, a biblioteka Greenock SVGMorphing automatycznie interpoluje między klatkami i utworzy wszystkie klatki pośrednie dla płynnego odtwarzania. Oto przykład:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Jeśli chcesz animować w 3D, ta biblioteka jest bardzo wydajna.
  Seen.js renderuje pliki 3D .obj w formacie SVG i bardzo łatwo je animuje.

REDAKCJE OBRAZÓW SVG

Jeśli chodzi o narzędzia, klatki kluczowe animacji można tworzyć głównie za pomocą trzech programów:

• Inkscape: open source, ma mnóstwo funkcji, jest to zaawansowany pakiet do edycji wektorów stworzony przez osoby uczestniczące w grupie roboczej SVG. Odniesienie do formatu SVG. Niełatwe do nauczenia się.

• Adobe Illustrator: komercyjne, bardzo wydajne oprogramowanie do rysowania wektorów, oferuje wiele funkcji wciąż nieobsługiwanych przez SVG, ale ma także najgorszą kompatybilność z tym formatem. Często trzeba ręcznie edytować wyeksportowany plik SVG, aby naprawić bałagan w programie Illustrator. Ale jest bardzo popularny w szkole artystycznej i wszyscy graficy wiedzą, jak go używać.

• Affinity Designer: jest to komercyjne oprogramowanie, takie jak Illustrator, ale z doskonałą kompatybilnością SVG, prawie na poziomie Inkscape. Interfejs użytkownika jest znacznie bardziej przyjazny, a teraz staje się bardzo popularny wśród artystów SVG.

REDAKCJE ANIMACJI SVG

Obecnie jedynym edytorem animacji SVG jest:

• Adobe Animate CC: poprzednia wersja Adobe Flash Pro została w pełni przepisana przez Adobe w celu migracji z przestarzałych animacji Flash do nowoczesnych animacji SVG. Możesz wyeksportować powstałe animacje SVG wraz z niestandardową biblioteką javascript lub zapisać w SVG + SMIL, używając wtyczek takich jak „flash2svg”. Ta ostatnia opcja jest bardzo wydajna, zawsze używam jej zamiast rozdętego rodzimego eksportera.

Możesz pobrać bezpłatną wtyczkę tutaj: https://github.com/TomByrne/Flash2Svg

Lub zainstaluj go z panelu wtyczek Adobe: https://creative.adobe.com/addons/products/7232

Niestety Adobe Animate CC jest komercyjny. Istnieją bezpłatne alternatywne aplikacje animacyjne typu open source, ale wypróbowałem je wszystkie i nadal są do bani IMHO. Miejmy nadzieję na przyszłość.

Referencje:
Mój bardziej wyczerpujący post na blogu na ten temat: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

Sprawa przywoływana na temat snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files