Веб-дизайнеру
Веб-разработчику
Дополнительно
Анимационные иконки SVG с библиотекой SNAP.SVG
Скачать
Демо
↓ Также Вам будет интересно ↓
3D красивая форма подписки на CSS3 + Javascript
Color Picker (цветовая палитра цветов) – JQuery плагин
Мини галерея изображений с автопрокруткой | JQuery плагин!
3D слайдер на CSS3 и JQuery / 3 примера + автопрокрутка
Цветное меню аккордеон на CSS и JQuery
Простые иконки с эффектом при наведении + 17 вариантов
SVG является одним из самых недостаточно используемых технологий, когда речь идет о веб-разработке. Несмотря на его полезность и мощные возможности он по-прежнему является загадкой для многих, и когда дело доходит до ее интеграции или использования анимации, многие разработчики не знают, с чего начать. С использованием такой библиотеки как , использование SVG эффектов становится более легким и сегодня мы будем его изучать, узнаем как создать анимационные иконки SVG.
Вы наверняка видели некоторые большие примеры анимированных иконок с использованием CSS переходов и анимации , как в . Мы попробуем сделать нечто подобное с помощью SVG иконок и Snap.svg .
HTML
Первое, что мы cделаем – создадим некоторые иконки SVG с помощью SVG редактора, например . Мы использовали размер иконок 64 × 64 пикселя.
Для каждого значка мы хотим создать специальную анимацию. Например, для значка масштабирования мы хотим немного увеличивать её. Мы определим, что произойдет для каждого значка в нашем js сценарии.
Мы добавим значки динамически на страницу с помощью Snap.svg и если SVG не поддерживается, мы просто показываем фоновое изображение для пролетных элементов, которые мы используем. Каждый графический элемент запишем так:
|
1 2 3 4 5 |
<section class="si-icons"> <span class="si-icon si-icon-play" data-icon-name="play"></span> <span class="si-icon si-icon-monitor" data-icon-name="monitor"></span> <!-- ... --> </section> |
С помощью Modernizr мы можем определить запасной вариант в нашем CSS:
|
1 2 |
.no-svg .si-icon-play { background-image: url('../png/play.png') } .no-svg .si-icon-monitor { background-image: url('../png/monitor.png') } |
Значки PNG были получены со сказочным инструментом . Вы можете также использовать CSS спрайты и определить активный класс, но мы решили просто сделать очень простой запасной вариант для этой демонстрации.
Если добавить класс si-icon-reverse для span, значок будет первоначально оказана с обратным положении. Например, если вы хотите отображать значок “стоп”, а не “воспроизведения”, нужно изменить код в следующий вид:
|
1 |
<span class="si-icon si-icon-reverse" data-icon-name="play"></span> |
Javascript
Теперь давайте взглянем на то, что мы делаем в JavaScript. Идея состоит в том, чтобы создать креативные иконки. Это может быть какая-то трансформации, вращение или scale, или изменение пути в целом. С Snap.svg мы можем динамически загружать наши SVGs иконки, которые мы храним в специальной папке, и можем манипулировать ими благодаря мощному API.
Переменная конфигурации для икон, svgIconConfig имеет все настройки для анимации каждого значка. Давайте взглянем:
|
1 2 3 4 |
[icon name - same name given to the data-icon-name] : { url : [url of the svg file], animation : [array of animation configs for each element] } |
Каждая конфигурация анимации имеет следующую структуру:
|
1 2 3 4 |
{ el : [element selector], animProperties : [animation config for the initial/from and final/to state] } |
Давайте посмотрим на некоторые возможные значения для начального и конечного состояния:
|
1 2 3 4 5 6 7 |
from : { val : [animation name value pairs], after : [attribute name value pairs to be applied when the animation ends], before : [attribute name value pairs to be applied before the animation starts], delayFactor : [animation delay factor], animAfter : [animation name value pairs to be applied when the animation ends] } |
Реальный пример конечной анимационной иконки svg будет следующим:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
myIconName : { url : '/web-developer/jquery/svgs/myIconName.svg', animation : [ { el : 'path:nth-child(5)', animProperties : { from : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}', animAfter : '{"stroke" : "#000"}' }, to : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.7269617 z"}', animAfter : '{"stroke" : "#444"}' } } }, { el : 'rect:nth-child(3)', animProperties : { from : { val : '{"transform" : "t0 0"}', after : '{ "opacity" : 0 }' }, to : { val : '{"transform" : "t-10 -10"}', before : '{ "opacity" : 1 }' } } } ] } |
Вы можете инициализировать значки, так:
|
1 |
new svgIcon( element, configuration [, options] ); |
И вот возможные варианты, опции и настройки:
|
1 2 3 4 5 6 7 8 |
{ speed : 200, // animation speed easing : mina.linear, // animation esing evtoggle : 'click', // event: click || mouseover size : { w : 64, h : 64 }, // size onLoad : function() { return false; }, // callback on svg load onToggle : function() { return false; } // callback on toggle (click or mouseover/mouseout) } |
Смотрите демо примеры, чтобы увидеть примеры для разных размеров, easings и активаций (при нажатии кнопкой мыши и при наведении).
Надеюсь, эти анимиции с иконками вам понравились и были по душе! Используйте его при создании своих сайтов, и делайте их ярче и привлекательне!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
