Создание сложных анимаций — сложная задача в веб-разработке. Вы должны иметь дело со временем загрузки, скоростью, плавностью анимации и многим другим. Однако с SVG у вас есть мощный инструмент для создания сложных векторных веб-анимаций.
Что такое СВГ?
SVG означает масштабируемую векторную графику. Он использует текстовый формат на основе XML для описания того, как изображение должно отображаться на экране. SVG отличается от файлов изображений, таких как PNG или JPG, тем, что они основаны на векторах, что означает, что их визуальная информация рассчитывается математически. Они не основаны на пикселях и, как правило, намного меньше по размеру, чем файлы PNG или JPG.
Визуальная информация в SVG рассчитывается и отображается браузером. Вы можете редактировать SVG в текстовом редакторе, если хотите, хотя более сложные изображения легче создавать в программе для иллюстраций, такой как Adobe Illustrator, где вы можете визуально видеть, что вы делаете.
Самое замечательное в SVG для Web заключается в том, что вы можете стилизовать его с помощью CSS, точно так же, как и с обычными элементами HTML.
Анимация SVG с помощью CSS
SVG можно анимировать так же, как элементы HTML, используя ключевые кадры CSS и свойства анимации или используя переходы CSS. Однако есть одно заметное различие между элементами SVG и обычными элементами HTML, и это источник, из которого вы можете анимировать элементы. В CSS у вас есть свойство под названием transform-origin, которое используется для изменения положения начала преобразования элемента. Начало преобразования HTML-элемента находится в точке (50%, 50%), которая является центром элемента. Однако источник трансформации SVG-элемента расположен в точке (0, 0), которая является левым верхним углом холста. Важно помнить об этом при анимации элементов SVG.
Тег <animate>
По сути, любое преобразование или анимация перехода, которые можно применить к элементу HTML, также можно применить к элементу SVG. Но есть некоторые свойства SVG, которые нельзя анимировать с помощью CSS, но которые можно анимировать с помощью встроенного SVG. Например, путь SVG поставляется с атрибутом d=””, который определяет форму этого пути.
В сам элемент SVG встроен тег <animate>. Он определяет, как атрибут элемента изменяется от начального значения до конечного значения в течение указанной продолжительности анимации. Он используется для анимации таких атрибутов, как атрибут d=””, которые нельзя анимировать с помощью CSS.
Общие элементы тега анимации — это цвет, движение и трансформация.
Тег анимации вложен внутри тега формы объекта, который необходимо анимировать. Он не работает с координатами пути, а только внутри тегов объекта.
Анимации на основе JavaScript
Вы также можете использовать JavaScript для взаимодействия с отдельными элементами SVG. SVG — это, по сути, документ с тегами, и вы также можете получить его селекторы идентификатора или класса.
Вы можете анимировать SVG с помощью ванильного JavaScript, но есть множество библиотек, которые, вероятно, сделают эту работу за вас. Такие библиотеки, как Vivus.js, Snap.svg, RaphaelJS и Velocity.js.
