В этой статье рассмотрим как анимировать иконки, точнее любую 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