SVG анимация — это современный инструмент для преобразования вашего проекта
во что-то интересное и уникальное. Часто, векторная анимация применяется на
сайтах, для того чтобы:
- прибавить интерес пользователей к вашему проекту,
- акцентировать внимание на каком-либо месте или элементе,
- добавить удобства и т. д.
Самое главное преимущество SVG анимации — это то, что ее можно очень гибко
видоизменять при помощи CSS или JavaScript.
SVG — это векторный формат, а это означает, что такая анимация не теряет
качества при масштабировании, плюс, довольно мало весит и не нагружает ваш
проект
SVG анимация
SVG анимация на вашем сайте может быть достигнута двумя способами:
- вы можете самостоятельно анимировать нужное SVG изображение, используя свои знания в CSS или JavaScript, а также используя дополнительные инструменты для этого.
- вы можете воспользоваться специальными программами, создающими SVG анимацию, в этом случае вам нужно будет ее только импортировать на свой сайт.
SVG анимации своими руками
Тут начинается самое интересное. Потому что в зависимости от сложности
необходимой анимации, нужно будет использовать соответствующий набор
инструментов. Ведь анимация бывает разной: анимировать можно просто контуры
какого-то элемента или даже небольшой элемент, но также можно создать целый
анимированный рисунок со множеством слоев, практически мультфильм.
Пример самой простой SVG анимации:
<svg width=»250″ height=»250″>
<circle cx=»55″ cy=»45″ r=»30″ fill=»black» />
</svg>
Как видите у SVG анимации есть свой собственный тег в HTML — это <svg>. Внутри
него мы помещаем свойства и атрибуты самой анимации. Если простым языком,
помещаем то, что должно произойти на странице с нужным нам элементом.
Также внутри тега <svg> часто помешается еще один тег, который отвечает за
небольшую анимацию по какому-то блоку — это тег <animate>.
Пример:
<svg>
<rect x=»0″ y=»0″ width=»200″ height=»200″ fill=»#fff»>
<animate attributeName=»width» from=»0″ to=»200″ dur=»6s» />
</rect>
</svg>
В указанном выше примере мы имеем некий блок размерами 200х200. Будет
анимироваться его появление, то есть он будет появляться(расти) слева направо.
Для этого мы указали в атрибуте «attributeName» значение атрибута, который мы
хотим анимировать, у нас это «width». Потом задали начальное и конечное значение
анимации — from/to, а также задали время анимации dur.
Таким способом можно анимировать и трансформировать простые объекты, их
можно: вращать, «прятать», уводить в сторону, задавать им необходимое
«движение» и др. Для этого только нужно указывать соответствующие атрибуты
нужного элемента.
Если будет желание анимировать более сложные объекты, то тогда нужно взять на
вооружение инструменты для работы с векторной графикой, чтобы иметь
возможность экспортировать нужное изображение в SVG и добавить его к себе на
сайт. В качестве такого инструмента подойдет:
- Adobe Illustrator;
- Sketch.
После добавления такого элемента на HTML страницу, нужно приступить к его
стилизации при помощи CSS или JavaScript. Однако чистый CSS или JS не всегда
справляются с нужными задачами, поэтому нужно взять на вооружение несколько их
популярных библиотек с документациями, которые помогут сделать все так как надо:
- Snap.svg. Одна из самых популярных библиотек для работы с SVG форматом
в целом, а не только с анимациями. - SVG.js. Негласно считается, что у данной библиотеки лучшая
производительность, среди всех перечисленных в нашем списке.
Предназначена для JavaScript. - Animateplus. Самая легковесная из известных библиотек для работы с
файлами SVG. - Vivus. Библиотека специально рассчитанная для анимации SVG.
- Raphael. Одна из самых старых библиотек, которая поддерживается еще
старыми версиями браузеров IE. - Walkway. Еще одна отличная библиотека для придания анимации контурам
SVG. - Velocity.js. Идеально подходит, для тех кто решил поработать с JavaScript
анимацией. - Mojs. Богатый функционал этой библиотеки поможет реализовать любую
анимацию.
Анимации SVG при помощи сторонних программ
Суть использования таких программ сводится к тому, что вы создаете нужную SVG
анимацию «на стороне», а потом «переносите» ее в свой проект. Программы для
анимации SVG помогают анимировать изображения с минимальными знаниями кода.
Они удобны и в некоторых случаях действительно ускоряют разработку анимации,
особенно для новичков. Но многие из них ограничены собственными шаблонами и
поэтому не всегда удовлетворяют ожидания пользователей.
Программы для анимации SVG:
- RAW. Это бесплатная программа, которая предлагает множество различных
шаблонов, для анимации SVG изображений. - Inkscape. Это очень популярный инструмент для работы с векторной
графикой. Распространяется бесплатно. С недавнего времени у него возникли
проблемы с созданием анимации SVG, но надеемся, что это исправят. - Adobe Edge. Один из лидеров в создании анимации SVG, так как позволяет
создавать просто превосходную векторную анимацию. Это немного сложный
инструмент для изучения с нуля, но Ютуб полон инструкций как ним работать.
Возможно вам будет интересно почитать статью «End-to-end или E2E процесс»
Заключение
Анимация SVG — создается не слишком сложно. Если есть знания CSS или
JavaScript, то с этим вообще никаких проблем нет. Если знаний таких нет, то на
помощь всегда могут прийти сторонние программы и онлайн-редакторы.
