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

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

3D-трансформации
3D-трансформации

С помощью 3D-трансформации создаются объемные реалистичные эффекты на веб-страницах. В отличии от простой ( в одной плоскости ) трансформации в 3D-трансформации элементы могут дополнительно перемещаться вдоль оси Z. Для того, чтобы создать объемное перемещение элемента необходимо для родительского блока задать свойство perspective.

Читать полностью
Необычное превью для «Главной»
необычное превью для главной

Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей. Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи

Читать полностью
Фильтры CSS3
Фильтры CSS

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

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

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

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

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