Анимация SVG — иконок

Главная › Практические примеры › Анимация SVG — иконок

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

SVG-иконки можно найти на многих сайтах, как платные, так и бесплатные. Я обычно пользуюсь iconfinder.com и flaticon.com

Ну, вот — иконки выбраны и скачаны на компьютер. Теперь начинается работа, чтобы иконки начали «оживать». Первым делом заходим на github.com и скачиваем два файла jquery.lazylinepainter-1.5.1.min.js и rAF-polyfil.js. Подключаем их, как обычно перед закрывающим тегoм </body>. Также подключаем библиотеку jquery и свой, пока еще пустой файл main.js.


...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.lazylinepainter-1.5.1.min.js"></script>
<script src="js/rAF-polyfil.js"></script>
<script src="js/main.js"</script>

</body>

Впрочем, три последних можно объединить в один.

Теперь наш путь лежит на сайт, который поможет анимировать нашу иконку. Пролистываем вниз до контейнера с «улыбающейся» стрелочкой SVG TO LAZY LINE CONVERTER, кликаем по нему и указываем путь к нашей иконке. Через несколько секунд снизу контейнера появляется окошечко с кодом. Кликаем по надписи Copy data to clipboard и вставляем скопированный код в файл main.js

Осталось в HTML-коде прописать одну строчку:


<div id="icon"></div>

Я маленько поторопился — нужно еще внести некоторые изменения в файле main.js. В HTML-коде мы создали блок с произвольным ID, а скрипту об этом не «доложили». Итак: открываем main.js в редакторе


var pathObj = {		// Смотри пояснение под кодом...
  "icon": { 		// Идентификотор нашего блока
    "strokepath": [
      {
	"path": "M99.6,36c-3.4,0-6.4,2.9-6.5,5.8c0-2.7-1.7-5.8-5.5-5.8s-41.6,0-44.2,0c-3,0-5,2.9-5,5.8  c0-2.9-2.2-5.8-5-5.8S20,36,20,36v61c0,0,10.5,0,13.3,0s5-5.8,5-8.6c0,2.9,2,8.6,5,8.6c2.6,0,40.4,0,44.2,0s5.5-5.9,5.5-8.6  c0.1,2.9,3.1,8.6,6.5,8.6s12.4,0,12.4,0V36C112,36,103,36,99.6,36z",
	"duration": 600
      },
    .............................................................................
	{
	"path": "M 57 74 L 75 74",
	"duration": 600
		}
	],
	"dimensions": {
	"width": 128,
	"height": 128
	}
  }
}; 

$(document).ready(function(){ 
 $('#icon').lazylinepainter( 		//   Идентификатор блока
 {
    "svgData": pathObj,          	// Смотри пояснение под кодом...
    "strokeWidth": 2,      	        //   Ширина линии
    "strokeColor": "#2589AE",	        //   Цвет линии
}).lazylinepainter('paint'); 
 });

Код приведен частично — приводить его полностью нет необходимости. Вносимые изменения понятны из комментариев. Главное указать идентификатор ( в данном примере это icon ). Остальные корректировки по мере необходимости.

Если на странице используется несколько анимированных иконок, то в объект, указывающий путь к SVG-графике — pathObj необходимо внести изменения, например pathObj_1, pathObj_50 (обязательно в обеих строках кода).

Можно изменять время анимации, задержку начала анимации, цвета и размеры линий для каждого участка «прорисовки». Для примера ниже приведена часть кода с данными изменениями.


.....
 {
 "path": "M34.9,89.6   c0,0-7.4-5.8-10.1-7.2",
 'strokeColor': '#cc2e8b',
 'strokeWidth': 2.3,
 "duration": 400,
 "delay": 2400
},
{
 "path": "M71.1,69.2   c-1.8,4.2-3.3,11-1,16.8",
 'strokeColor': '#b5287b',
 'strokeWidth': 1.8,
 "duration": 600,
 "delay": 2800
},
......

Осталось посмотреть как все это выглядит в реальности, на живом примере, а кто готов применить это в жизнь предлагаю скачать архивчик с этим примером.

Камера храненияСкачать