logo

Анимация 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
},
......

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


Практические примеры 0

Рекомендую прочитать...

Трансформация «Дверной глазок»
трансформация Дверной глазок

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

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Анимация при скролле страницы
Анимация при скролле страницы

Как и было обещано в предыдущей статье «Бегущая строка на CSS3» сегодня рассмотрим работу анимации при прокрутке (скролле) страницы. Существуют различные способы для реализации данной проблемы. В статье рассмотрим 2 варианта решения. Они довольно простые и не вызовут затруднений при их реализации.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.