30 Niesamowita animacja SVG dla Twojej inspiracji
Projektanci wykorzystywali do tworzenia animacji w elementach HTML za pomocą CSS. Jednak ze względu na ograniczenia elementów HTML w tworzeniu wzorów, kształtów i innych, w naturalny sposób zwracają się one do SVG, który oferuje bardziej interesujące możliwości.
Współpracując z SVG, cieszymy się dobrą obsługą przeglądarki dla animacji SVG i mamy więcej sposobów tworzenia nowej animacji. Możesz użyć zarówno wbudowanej funkcji animacji SVG, jak i animacji CSS3 (zwróć uwagę, że nie wszystko może być zrobione przez CSS, więc nadal potrzebujesz JavaScript). Innym sposobem jest użycie silników JavaScript, takich jak GSAP lub Snap. JS to dobra praktyka do tworzenia animacji.
Tutaj skompilowałem niesamowite animowane SVG. Niektórzy używają animacji SVG, inni używają transformacji CSS do podstawowej animacji, a reszta korzysta z pomocy JavaScript.
Animacja graniczna autorstwa Seana McCaffery'ego
Wykonana tylko z CSS, obramowanie tworzy gładko wokół tekstu, gdy najedziesz na niego “WAHAĆ SIĘ” instrukcja.
Elastyczny pasek boczny SVG autorstwa Nikolaya Talanova
Pasek boczny staje się elastyczny podczas próby wyciągnięcia go z boku. Ładna koncepcja zastosowana na pasku aplikacji inspirowanym materiałem.
Pociągnij w dół, aby odświeżyć Nikolay Talanov
Większość stron pozwala “rozbierać, opuszczać” na stronie, aby odświeżyć. Z tą animacją, kiedy ty “wydanie” strona, ikona Wyślij zmienia się w ikonę Samolot i zostaje uwolniona w powietrze.
Animowany gradient na tekście Patrick Young
Oto subtelny, ale niełatwy do pominięcia ruchomy gradient tekstu, który pokochają miłośnicy typografii.
Animacja serca autorstwa Nikołaja Talanowa
Ta animacja pokazuje, jak ikona serca składa się z dwóch kół i kwadratu. Transformacja odbywa się za pomocą animacji CSS.
Let's Travel by jjperezaguinaga
Animacja ilustrująca miasta i popularne miejsca turystyczne na świecie. Ruchy i transformacje są tworzone za pomocą animacji CSS.
Menu przełącza animację przez Tamino Martinius
Animacja morfingu ikony hamburgera zmieniająca się w ikonę krzyża. Zobacz, jak gładkie jest przejście między dwoma obiektami.
Animowana infografika autorstwa Sdrasa
Niesamowita animacja Sarah Drasner, oparta na osi czasu GSAP. To infografika ożywiona, wykonana z animacją. Użyj suwaka, aby uzyskać dostęp do ramek z dowolnego punktu.
Rain-Bros nie lubią JS by cihadturhan
Unikalna i zabawna animacja pętli przedstawiająca spacer bohaterów. Ruch obiektów w tej wersji demonstracyjnej jest połączeniem animacji SVG i CSS3. Nogi używają animacji SVG, podczas gdy inne używają animacji CSS3.
Zegar autorstwa Mohamada Mohebifara
Obserwuj płynny ruch drugiej ręki w tym zegarze pokazujący aktualny czas. Animacja jest całkowicie wykonana przy użyciu funkcji animacji SVG.
Rainbow Rocket Man autorstwa Chrisa Gannona
Astronauta strzelający w kosmos za pomocą plecaka odrzutowego napędzanego tęczą (?). Ładna animacja wykonana za pomocą wtyczki GSAP Tweenmax.
Animowana ikona autorstwa Luigi De Rosa
Jednak na tych animowanych ikonach SVG można sprawdzić, co mogą zrobić. Twórca zrobił to za pomocą GSAP.
Płaski obszar roboczy autorstwa Hoàng Nhật
Animacja ilustruje obszar roboczy w płaskiej stylistyce. Twórca użył GSAP, aby stworzyć niesamowitą animację stacji roboczej.
Klikalna animowana ikona Hamisha Williamsa
Jest to fajna animacja wykorzystująca bibliotekę snap.svg. Kliknij, aby zobaczyć pocztę “wysłany”.
Nurkowanie Chris Gannon
Czy kiedykolwiek opuściłeś kamienie na powierzchni jeziora? Oto prosta animacja ścieżki SVG ilustrująca to, ale bez kamieni i bez jeziora.
Ruch do sieci przez LegoMushroom
Ma animację, ładną melodię, super fajne wejście dla tekstu, czego nie lubić? Jest to zbudowane z mo.js, biblioteki JavaScript z grafiką ruchu.
Animowana czcionka do pisania autorstwa Lee Portera
Poza używaniem SVG do tworzenia animacji ścieżek w kształcie, możesz użyć go do typografii, tak jak to zrobił ten twórca. Efekt rozmycia sprawia, że jest bardziej niesamowity.
Lepsze menu Lucas Bebber
Baw się dobrze z efektem lepkości w tym projekcie, który jest tworzony za pomocą filtra SVG i dodając animację CSS. Wynik jest realistyczny i naprawdę fajny. Możesz grać w czterech różnych wersjach.
New Cake autorstwa Marco Barría
Jak zrobić warstwowy tort urodzinowy z animacją SVG i CSS.
Dziękuję Rachel Smith
Po prostu zobacz tę niesamowitą animację prostego podziękowania. Jest tworzony przy użyciu biblioteki SVG i GSAP TweenMax.
CSS vs SVG Mario Sancheza Maselli
Spójrzmy teraz na porównanie o animacji CSS i SVG, czy widzisz różnicę?
Walking Dog Marka Nelsona
Innym sposobem animowania SVG jest użycie obrazków sprite'ów, takich jak ten twórca.
Ładowarka klepsydrowa firmy Leela
Twórcza praca wykonana przy użyciu czystej animacji SVG (SMIL); brak CSS lub JS do animowania rzeczy tutaj.
Animacja logo przez Adem ilter
Oto ładne animowane wprowadzenie logo z wbudowaną animacją SVG. Nie używano CSS ani JS, aby wszystko działało.
Animacja statystyk autorstwa Jonasa Badalica
Piękny wykres statystyk z animacją SVG opartą na bibliotece Snap.SVG.
Ouroboros by Noel Delgado
Niesamowita ścieżka animacji SVG. Najpierw twórca narysował ścieżkę na SVG, zanim użył tween.js do dodania animacji.
Creative Gooey Effects Lucas Bebber
Oto siedem kreatywnych zastosowań filtra SVG, aby uzyskać efekt podobny do tego. Ulubiony jest wizualizator muzyczny, animacja wygląda bardzo ładnie.
Rzuć krowę Sarah Drasner
Ten jest animacją SVG zasilaną przez TweenMax, ale stworzoną dla zabawy. Przytrzymaj i przeciągnij krowę po planecie. Obróci się w „orbicie”.
Animowane logo Ali
Animacja może być miłym dodatkiem do bulgoczącego logo piwa. Ładne małe pływające bąbelki są zbudowane wyłącznie z rodzimej składni animacji SVG.
