30 Страхотна SVG анимация за вдъхновение

Дизайнери, използвани за създаване на анимации в HTML елементи, използвайки CSS. Въпреки това, поради ограниченията на HTML елементите при създаването на шаблони, форми и други, те естествено се обръщат към SVG, което предлага по-интересни възможности.

Работейки с SVG, ние се радваме на добра поддръжка на браузъра за SVG анимация и имаме повече начини да създадем нова анимация. Можете да използвате както вградената функционалност на SVG анимация, така и CSS3 анимация (имайте предвид, че не всичко може да се направи от CSS, така че все още има нужда от JavaScript). Друг начин е използването на JavaScript двигатели като GSAP или Snap. JS е добра практика за създаване на анимация.

Тук съм събрал някои невероятни анимирани SVG. Някои използват SVG анимация, други използват CSS трансформация за основна анимация, а останалите използват помощта на JavaScript.

Border Animation by Sean McCaffery

Създаден само с CSS, границата се оформя гладко около текста, когато задържите мишката върху “мътя” инструкция.

Еластична странична лента SVG от Николай Таланов

Страничната лента става еластична, когато се опитате да я издърпате отстрани. Една хубава концепция, приложена върху страничната лента с вдъхновено от Material Design.

Издърпайте за освежаване от Николай Таланов

Повечето страници ви позволяват “дръпнете надолу” на страницата, за да се опресни. С тази анимация, когато вие “пускане” страницата, иконата за изпращане се променя в иконата на самолет и се освобождава във въздуха.

Анимиран градиент на текста от Патрик Йънг

Ето едно фино, но не е лесно да се пропусне движещ се градиент на текст, който любителите на типографията ще обичат.

Анимация на сърцето от Николай Таланов

Тази анимация ви показва как иконата на сърцето е направена от два кръга и квадрат. Трансформацията се извършва с CSS анимация.

Да пътуваме с jjperezaguinaga

Анимация, която илюстрира градове и популярни туристически дестинации в света. Ходовете и трансформациите се създават с помощта на CSS анимация.

Меню анимация от Тамино Мартиниус

Морфинг анимация на иконата на хамбургер, превръщаща се в кръстосана икона. Вижте колко гладък е преходът между двата обекта.

Анимиран инфографика от Сдрас

Страхотна анимация от Сара Дразнър, задвижвана от времевата линия на GSAP. Това е инфографика, която оживява, направена с анимация. Използвайте плъзгача за достъп до кадрите от всяка точка.

Rain-Bros не харесват JS от cihadturhan

Уникална и забавна анимация, изобразяваща разходката на героите. Движението на обектите в тази демонстрация е комбинация от SVG и CSS3 анимация. Краката използват SVG анимация, докато други части използват CSS3 анимация.

Часовник от Мохамад Мохебифар

Гледайте плавното движение на втора ръка в този часовник, показващ текущото време. Анимацията е изцяло направена с помощта на функционалността на SVG анимацията.

Rainbow Rocket Man от Крис Ганон

Астронавт, който стреля в космоса с дъговия реактивен пакет (?). Хубава анимация, направена с помощта на плъгина GSAP Tweenmax.

Анимирана икона от Луиджи де Роса

Въпреки това над тези анимирани SVG икони, за да проверите какво могат да направят. Създателят направи това с помощта на GSAP.

Плоско работно пространство от Hoàng Nhật

Анимацията илюстрира работно пространство в плосък стил дизайн. Създателят използва GSAP, за да направи тази страхотна анимация на формирането на работна станция.

Анимираната икона с кликване на Hamish Williams

Това е страхотна анимация, която използва библиотеката snap.svg. Кликнете, за да видите изпращането на пощата “изпратен”.

Гмуркане от Крис Ганон

Изпускали ли сте някога камъни по повърхността на езерото? Ето една проста анимация за SVG път, която илюстрира това, но без камъни и няма езеро.

Предложение за уеб от LegoMushroom

Има анимация, хубава мелодия, супер готин вход за текста, какво да не харесва? Това е изградено с mo.js, библиотека за графичен JavaScript.

Анимиран шрифт за писане от Ли Портър

Освен използването на SVG, за да направи анимация на път, която да скицира форма, можете да я използвате за типография като това, което този създател е направил. Ефектът от размазването го прави по-страхотно.

Менюто на Гуои от Лукас Бебер

Забавлявайте се с ефекта gooey в този дизайн, който се прави с помощта на SVG филтър и чрез добавяне на CSS анимация. Резултатът е реалистичен и наистина страхотен и можете да играете с четири различни версии.

Нов торта от Марко Бария

Как да си направим слоеста торта, приготвена с SVG и CSS анимация.

Благодаря ви от Рейчъл Смит

Просто вижте тази страхотна анимация на проста благодарствена бележка. Той е създаден с помощта на SVG и GSAP TweenMax библиотеката.

CSS срещу SVG от Марио Санчес Масели

Сега да видим сравнението между CSS и SVG анимацията, виждате ли разликата?

Пешеходно куче от Марк Нелсън

Друг начин за анимиране на SVG е чрез използване на изображения от спрайтове, например как е създал този създател.

Товарач за часовници от Leela

Творческа работа, направена с помощта на чиста SVG анимация (SMIL); не CSS или JS да анимирате нещата тук.

Лого Анимация от Adem ilter

Ето хубаво анимационно въвеждане на лого, използващо вградена SVG анимация. Не използвахме CSS или JS, за да накараме всичко да работи.

Статистическа анимация от Йонас Бадалич

Красива графика на статистиката с SVG анимация, задвижвана от Snap.SVG библиотека.

Ouroboros от Ноел Делгадо

Невероятна пътека за анимация в SVG. Първо създателят нарисува маршрут на пътя в SVG, преди да използва tween.js, за да добави анимация.

Creative Gooey ефекти от Lucas Bebber

Ето седем творчески начина на използване на SVG филтъра, за да се направи хаотичен ефект. Музикалният визуализатор е любимият ми, анимацията изглежда много хубаво.

Хвърли кравата от Сара Дразнър

Това е SVG анимация, задвижвана от TweenMax, но направена само за забавление. Задръжте и плъзнете кравата около планетата. Ще се върти в "орбита".

Анимирано лого от Али

Анимацията може да бъде хубаво малко допълнение за логото на бълбукащата бира. Хубавите малки плаващи балони са изградени изцяло с SVG родния синтаксис на анимацията.