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

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

  • Freebies
  • Шрифты
  • Статьи
  • WordPress

Подписка

Тэги #

3D AI App Background Branding CSS e-commerce Font Framework HTML Icons JS Landing Mock-up Patterns PSD Retro SVG UI WordPress Веб-сервис Портфолио Статья Тема Типографика Урок Шрифт

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

09.04.2014 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. при запуске на локальной машине возможна задержка старта анимации на несколько секунд.

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

Filed Under: Статьи Tagged With: AI, HTML, JS, SVG, Веб-сервис, Урок

Понравилось? Поделись!

Популярно

Обзор Startup Framework. PSD презентационной страницы проекта

Обзор Startup Framework. PSD презентационной страницы проекта

Набор PSD шаблонов интернет магазина

Набор PSD шаблонов интернет магазина

Свободный шрифт Марта с поддержкой кириллицы

Свободный шрифт Марта с поддержкой кириллицы