Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
 Создаем SVG анимацию через CSS и JS

Создаем SVG анимацию через CSS и JS

29 Марта 2018
Александр Сидлецкий
Front End Developer
Александр Сидлецкий
следующая статья

Перед тем как начать разговор о SVG анимации, давайте разберемся, что такое SVG.
Scalable Vector Graphics - масштабируемая разметка векторной графики. Предназначена для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. 

Формат SVG имеет ряд достоинств:

  • Файлы SVG можно читать и редактировать с помощью обычных текстовых редакторов. SVG хорошо поддаются сжатию. Они меньше по размеру, чем сравнимые изображения форматов JPEG и GIF.

  • SVG - векторный формат, а это позволяет масштабировать изображение без потери качества.

  • Текст в графике SVG не является изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами.

  • SVG — открытый стандарт, то есть пользователь может изменить рисунок, поменяв содержание файла SVG.

  • Совместимость с таблицами стилей (CSS), которые используются для описания внешнего вида страниц сайтов.

  • Анимация реализована в SVG с помощью языка SMIL. Элементами можно управлять при помощи JavaScript.

И несколько недостатков, куда же без них:

  • Сложность использования в крупных картографических приложениях. Мелкие детали описывать слишком трудоёмко.

  • Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных.

Пример SVG кода: 


   
   
       
       
       
   


Исполнение данного кода: 

В даном изображении можно просто изменить параметры в коде. Для примера - картинка с изображением занимает 35.5 КБ, а код  SVG - 426 байт.

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

Так зачем же разработчику использовать SMIL?  Есть некоторые свойства SVG, которые невозможно изменить и анимировать при помощи CSS. Например, атрибут d=””, в котором находится набор данных, определяющих форму элемента. Недостающие возможности анимации на CSS можно восполнить с помощью JavaScript. Для этого есть ряд библиотек. Это будет целесообразно, если браузер (например Opera Mini) не поддерживает SMIL анимацию.

Целевой объект анимации задается с помощью xlink:href.



Если атрибут  xlink:href не задан, то целевым элементом становится родительский элемент:


  

Атрибут attributeName используется для указания имени атрибута, который будет анимироваться. К примеру, если нужно анимировать положение центра фигуры на оси Y, нужно задать “сy” в качестве значения атрибута attributeName.

Вот код, который позволяет анимировать движение по оси Y синего круга из предыдущего примера: 


   
   
       
       
       
   
   


В течение 5 секунд  (dur="5s"), после клика на синий круг (begin="click"), он будет двигаться по оси Y, начиная с точки from="300" в точку to="100". После выполнения - анимация остановится в конечной точке (fill="freeze").  Чтобы задать бесконечное повторение анимации, достаточно добавить атрибут repeatCount="indefinite".

Также, можно задать начало выполнения анимации после загрузки страницы. Или же подключить функцию по истечению некоторого времени после загрузки,  добавить анимацию элемента страницы с задержкой после клика и тому подобное.

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






Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут