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

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

Библиотека Animate.css
animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

Читать полностью
Анимированный логотип на чистом CSS
Анимированный логотип

Если вы посмотрите на логотип, он состоит из 4 основных цветных точек. Эти точки расширяются и принимают вид скругленных линий, затем сжимаются, принимая первоначальный вид.

Они также перекрещиваясь, перекрывают друг друга, да и весь логотип установлен под углом. При этом цвета в местах пересечения линий смешиваются, но об этом в конце статьи.

Читать полностью
Трансформации для блока анонсов
блок анонсов

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

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

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

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

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