Анимационные иконки SVG с библиотекой SNAP.SVG | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryАнимационные иконки SVG с библиотекой SNAP.SVG
Дата: 03.01.2014 в 11:22 | Просмотров: 6507

Анимационные иконки SVG с библиотекой SNAP.SVG

креативные иконки svg
Скачатьбесплатно с сервера
Демодемонстрация

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

Вы наверняка видели некоторые большие примеры анимированных иконок с использованием CSS переходов и анимации , как в Navicon Transformicons. Мы попробуем сделать нечто подобное с помощью SVG иконок и Snap.svg .

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

HTML

Первое, что мы cделаем – создадим некоторые иконки SVG с помощью SVG редактора, например Inkscape. Мы использовали размер иконок 64 × 64 пикселя.

креативные иконки

Для каждого значка мы хотим создать специальную анимацию. Например, для значка масштабирования мы хотим немного увеличивать её. Мы определим, что произойдет для каждого значка в нашем js сценарии.

Мы добавим значки динамически на страницу с помощью Snap.svg и если SVG не поддерживается, мы просто показываем фоновое изображение для пролетных элементов, которые мы используем. Каждый графический элемент запишем так:

С помощью Modernizr мы можем определить запасной вариант в нашем CSS:

Значки PNG были получены со сказочным инструментом iconizr. Вы можете также использовать CSS спрайты и определить активный класс, но мы решили просто сделать очень простой запасной вариант для этой демонстрации.

Если добавить класс si-icon-reverse для span, значок будет первоначально оказана с обратным положении. Например, если вы хотите отображать значок “стоп”, а не “воспроизведения”, нужно изменить код в следующий вид:

Javascript

Теперь давайте взглянем на то, что мы делаем в JavaScript. Идея состоит в том, чтобы создать креативные иконки. Это может быть какая-то трансформации, вращение или scale, или изменение пути в целом. С Snap.svg мы можем динамически загружать наши SVGs иконки, которые мы храним в специальной папке, и можем манипулировать ими благодаря мощному API.

Переменная конфигурации для икон, svgIconConfig имеет все настройки для анимации каждого значка. Давайте взглянем:

Каждая конфигурация анимации имеет следующую структуру:

Давайте посмотрим на некоторые возможные значения для начального и конечного состояния:

Реальный пример конечной анимационной иконки svg будет следующим:

Вы можете инициализировать значки, так:

И вот возможные варианты, опции и настройки:

Смотрите демо примеры, чтобы увидеть примеры для разных размеров, easings и активаций (при нажатии кнопкой мыши и при наведении).

Надеюсь, эти анимиции с иконками вам понравились и были по душе! Используйте его при создании своих сайтов, и делайте их ярче и привлекательне!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/
Перевел: Владислав Бондаренко


Добавить комментарий