Pixelgene - Ресурсы для веб-дизайнеров. Freebies. Журнал о веб-дизайне

Подборки свежих freebies, мокапы(mock-up), шрифты, иконки, psd, wordpress, статьи о веб-дизайне, лайвхаки для дизайнеров.


Анимация SVG вектора с Illustrator и jQuery плагином Lazy Line Painter

Leave a Comment

blog_illustratorВ последнее время стала очень популярна разного рода анимация SVG(Scalable Vector Graphics) графики на сайтах и приложениях. Это связано с тем что все новейшие браузеры уже поддерживают этот формат. Вот инфа по поддержке браузерами SVG.

В данной статье рассмотрен простейший пример анимации SVG вектора при помощи легкого Jquery плагина Lazy Line Painter.


Демо

Исходник

Для выполнения и полного понимания данной задачи желательны базовые знания HTML, CSS, Jquery, но не обязательны если вам просто хочется анимировать SVG) Приступим!

И так шаги которые нам нужно выполнить:

  1. Создать правильную файловую структуру
  2. Загрузить и подключить плагин
  3. Нарисовать крутую контурную картинку в Adobe Illustrator
  4. Конвертировать нашу картинку в Lazy Line Converter
  5. Вставить полученый код в main.js
  6. Добавить немного CSS по вкусу

1. Создать правильную файловую структуру
C этим нам поможет сервис Initializr где нужно выбрать параметры как на картинке ниже.

initializr-screenshot

  • Classic H5BP (HTML5 Boiler Plate)
  • No Template
  • Just HTML5 Shiv
  • Minified
  • IE Classes
  • Chrome Frame
  • Затем нажать Download it!

2. Загрузить и подключить плагин

lazy-line-painter

Так как initializr поставляется с последней библиотекой Jquery, из архива который нам нужно скачать с репозитория проекта Lazy Line Painter, нужно перенести в наш проект только 2 файла. Первый это ‘jquery.lazylinepainter-1.1.min.js’(версия плагина может отличатся) он находится в корне полученой папки. Второй это example/js/vendor/raphael-min.js.

drop-files-in

Эти 2 файла помещаем в папку js. И подключаем их к нашему index.html перед main.js следующим образом:

<script src="js/jquery.lazylinepainter-1.1.min.js"></script>
<script src="js/raphael-min.js"></script>

3. Нарисовать крутую контурную картинку в Adobe Illustrator

  1. Рисуем нашу контурную картинку в Illustrator (проще всего это сделать при помощи Pen Tool)
  2. Необходимо чтобы контуры нашего рисунка не замыкались тк для нашего эффекта необходимы начало и конец
  3. Не должно быть заливок
  4. Максимальный размер файла — 1000×1000 px, 40kb
  5. Сделаем кроп до границ объекта Object>Artboards>Fit To Artboards Bounds
  6. Сохраняем в формате SVG(стандартные настройки сохранения подойдут)

Для примера можете воспользоваться иконками во вложении.

Screen-Shot-2013-02-03-at-7.54.33-PM

4. Конвертировать нашу картинку в Lazy Line Converter
Просто перетащи свою иконку в окошко что на рисунке ниже.
Толщину, цвет контура и скорость анимации можно будет изменить в самом коде который появится после конвертирования!

lazy-converter

5. Вставить полученый код в main.js
Теперь просто вставляем полученный код в пустой файл main.js
Параметры:
strokeWidth — толщина контура
strokeColor — цвет контура
Также можно изменять скорость рисования каждого вектора изменяя значения параметра duration (по умолчанию 600)

6. Добавить немного CSS по вкусу
Удаляем из index.html абзац 

<p>Hello world! This is HTML5 Boilerplate.</p>

И вместо него вставляем блок в котором будет происходить наша анимация

<div id="icons"></div>

затем добавляем немного CSS в файл main.css для более приятного оформления:

body { 
    background:#F3B71C; 
}

#icons {
    position: fixed;
    top:50%;
    left:50%;
    margin: -300px 0 0 -400px;
}

сохраните все файлы.
Теперь просто откройте index.html в современном браузере и наслаждайтесь эффектом.

P.S. при запуске на локальной машине возможна задержка старта анимации на несколько секунд.

Оригинал статьи