15 примеров SVG-анимации для веб-дизайнеров

SVG (масштабируемая векторная графика) имеет ряд преимуществ по сравнению с другими форматами изображений, используемыми в Интернете. Прежде всего, SVG-файлы масштабируемы, поэтому их можно адаптировать к любому размеру экрана без потери качества. Тогда браузеры смогут загружать их быстрее, используя меньше ресурсов. И их можно редактировать с помощью CSS, как если бы они были обычными элементами HTML. Помимо использования для статических изображений, вы также можете создавать потрясающие анимации с помощью SVG. В этой статье мы собрали 15 примеров SVG-анимации, чтобы вдохновить вас использовать их и в ваших собственных веб-проектах.

Станьте путешественником сегодня

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.

Эта потрясающая демонстрация «Стань путешественником сегодня» от Хосе Агинаги в настоящее время является самой популярной SVG-анимацией на CodePen, и это не случайно, поскольку в этот художественный проект вложено много работы. Автор создал графику в Adobe Illustrator и экспортировал ее с помощью плагина SVG Export. Он также использовал препроцессор Sass для создания точно настроенной анимации по ключевым кадрам, которая аккуратно перемещает земной шар по экрану.

Анимация загрузчика SVG

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

Эти чистые загрузчики SVG от Нихила Кришнана – прекрасный пример того, как создавать SVG-анимацию, подходящую для реальных веб-проектов. Как и в демонстрации «Стань путешественником сегодня», эти загрузчики также используют препроцессор Sass. Однако здесь анимация представляет собой собственный эффект SVG, добавляемый непосредственно к SVG-элементу animateTransform на странице HTML.

Срок сдачи проекта приближается

See the Pen #2 – Project Deadline – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.

Эта крутая анимация от Джонатана Сильвы одновременно пугает и забавна. Это очень хорошо показывает, что вы действительно можете использовать SVG-анимацию для любого творческого проекта. С помощью этого небольшого, но умного напоминания о сроках вы можете мотивировать свою команду соблюдать сроки, не отвлекаясь. Здесь автор создал анимированный эффект, используя правило CSS ’@keyframes и немного jQuery для установки времени.

Анимация текста SVG с использованием метода смещения обводки

See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen.

Помимо анимированных изображений, вы также можете использовать SVG-анимацию для создания потрясающих текстовых эффектов. Например, взгляните на эту красивую текстовую анимацию от Mack Ayache. Он использует простые формы SVG для создания букв. Затем он добавляет движение отдельно к каждой букве, используя атрибуты SVG stroke-dashoffset и stroke-dasharray. Однако он добавляет эти атрибуты в CSS, а не в элемент в HTML. Он может это сделать, потому что атрибуты представления SVG также могут использоваться как свойства CSS.

Анимация эскиза фотографии

See the Pen Sketch Photo by Kristen Zirkler (@kristenzirkler) on CodePen.

Этот уникальный эскиз фото-анимации от Кристен Цирклер может стать отличным дополнением к любому пользовательскому интерфейсу, который показывает изображения профиля. Автор создала графику в Adobe Illustrator, поместив два слоя друг на друга, один для своей фотографии, а другой для контура, идущего вокруг ее лица. Затем она использовала Sass, чтобы добавить анимацию по ключевым кадрам, которая изменяет правила смещения штрихов и непрозрачности.

Анимация бьющегося сердца

See the Pen Beating Heart – CSS and SVG animation – low poly by morkett (@morkett) on CodePen.

Если вы хотите увидеть пример действительно сложной SVG-анимации, взгляните на тщательно созданную Дэвидом Коркеттом анимацию биения сердца. Несмотря на то, что это сложный эффект, он не использует JavaScript, а полагается исключительно на SVG и CSS. Сердце состоит из нескольких многоугольников, к которым автор добавил эффекты, используя правило CSS @keyframes.

Бессмысленный всадник

See the Pen Pointless Rider by Elliott Munoz (@elliottmunoz) on CodePen.

Если вы когда-нибудь хотели создать анимированный логотип, вот отличный пример. Демонстрация Pointless Rider от Эллиота Муньоса показывает, что вы также можете использовать SVG-анимацию в целях брендинга. По умолчанию это элегантный черно-белый логотип. Автор добавил тонкий анимированный эффект с SVG-элементами animateTranform и animateMotion. Здесь CSS только выравнивает элементы и устанавливает цвета, но SVG заботится обо всех движениях на экране.

Sovog 404 страница

See the Pen Sovog 404 page by Marco Barría (@fixcl) on CodePen.

Страницы 404 – это еще одна область, в которой вы можете успешно использовать SVG-анимацию. Демонстрация Sovog 404 Марко Барриа использует SVG и Sass, чтобы заставить робота поднимать конечности. Хотя части робота представляют собой отдельные пути SVG, они перемещаются вверх и вниз с помощью преобразования: rotate (); Свойство CSS, используемое для каждого пути отдельно.

Список SVG

See the Pen
List Expand by Daniel (@daniel_wolf)
on CodePen.

Если вам нужен пример SVG-анимации, которую вы можете легко использовать в повседневных проектах, вот интересная демонстрация. Эта элегантная анимация расширения списка от Дэниела Вольфа может хорошо работать в любом мобильном или веб-приложении, где вы хотите показывать пользователям расширенную информацию. Анимации полагаются на CSS, а также немного на jQuery для функциональности щелчка.

Анимация SVG с помощью слайдеров

See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.

В красивой демонстрации SVG-анимации Кеннета Амоса с ползунками используются как Sass, так и JavaScript для достижения интеллектуального, управляемого пользователем эффекта. Вы можете изменить размеры изображения с помощью трех ползунков внизу страницы. Каждый ползунок привязан к отдельной части изображения, которая начинает двигаться, когда пользователь меняет положение ползунка. Для этой анимации автор использует свойство CSS перехода вместо анимации по ключевым кадрам, что приводит к более тонкому эффекту.

Страсть к путешествиям

See the Pen Day 004 :: Wanderlust by Heidi Olsen (@SwissWebMiss) on CodePen.

Wanderlust демонстрирует удивительный SVG эффект, который вы можете увидеть в пользовательском интерфейсе многих приложений авиакомпаний и туристических агенств. Хайди Олсен создала эту SVG-анимацию для The100DayProject. Вместо того, чтобы использовать собственные элементы SVG или CSS для анимационного эффекта, она выбрала библиотеку Tween.js , которая является еще одним отличным способом добавления сложных анимаций в SVG. Она также использовала абсолютное позиционирование, чтобы зафиксировать самолет и его маршрут на экране.

Назад в будущее

See the Pen SVG Back to the Future animation by Sépion (@Sepion) on CodePen.

Если вы любитель кино, вам наверняка понравится этот анимационный фильм «Назад в будущее» Эммануэля Друэна. В нем изображен автомобиль, путешествующий во времени, известный по знаменитому фильму. Автомобиль появляется на экране постепенно, от первых строк до полноценной графики. Автор использует несколько менее известные свойства CSS для достижения эффекта, такие как stroke-opacity, stroke-width, animation-fill-mode,, и другие.

Анимация изометрического алфавита

See the Pen Isometric Alphabet Animation by Jeselle Obina (@JZL) on CodePen.

Изометрическая анимация алфавита Джезель Обины – это супер классная коллекция анимированных букв от A до Z. Все буквы выполнены в 3д и украшены градиентной заливкой линий. В HTML каждая буква представляет собой отдельный тег <div>, который включает путь SVG. Автор добавляет анимированный эффект с помощью CSS, используя хорошо рассчитанные временные функции кубической кривой Безье. Если вам нужны анимированные трехмерные буквы, которые хорошо смотрятся на любом экране, эту потрясающую демонстрацию определенно стоит присмотреть.

SVG Sprite Animation

See the Pen SVG Sprite Animation by Mark Nelson (@marknelson) on CodePen.

Эта впечатляющая анимация прогулки таксы от Марка Нельсона использует технику спрайтов SVG, подробно описанную в статье Сары Драснер в журнале Smashing Magazine. Если вы посмотрите на HTML, вы увидите, что он не включает никаких элементов <svg> , а только набор тегов <div> . Это связано с тем, что изображения SVG добавляются в CSS в свойстве background многоуровневым способом. Всего демонстрация содержит четыре SVG (с запасными вариантами PNG). Автор добивается движения, анимируя свойство background-position с помощью правила @keyframes.

Планетарный резонанс

See the Pen Planetary Resonance by Dudley Storey (@dudleystorey) on CodePen.

Если вы любите астрономию и геометрию, вот крутая SVG-анимация под названием Planetary Resonance, которая вам наверняка понравится. Автор Дадли Стори визуализирует совпадение орбитального резонанса Земли и Венеры. Согласно описанию демонстрации, «на каждые восемь оборотов вокруг Земли Венера обращается вокруг Солнца почти ровно 13 раз». Как и следовало ожидать, в этой демонстрации все точно рассчитано. В блоге автора есть даже пошаговое руководство , которое поможет вам добиться того же эффекта.

Итог

Мы надеемся, что вы почерпнете вдохновение из нашей коллекции и скоро начнете создавать свои собственные SVG-анимации. Как видите, существует множество техник, которые можно использовать для добавления анимационного эффекта к графике SVG – вы обязательно найдете тот, который вам больше всего нравится.