Останнім часом стала дуже популярна різноманітна анімація 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. Створити правильну файлову структуру
З цим нам допоможе сервіс Initializr, де потрібно вибрати параметри як на малюнку нижче.

• Classic H5BP (HTML5 Boiler Plate)
• No Template
• Just HTML5 Shiv
• Minified
• IE Classes
• Chrome Frame
• Потім натиснути на Download it!

2. Завантажити та підключити плагін

Так як initializr поставляється з останньою бібліотекою Jquery, з архіву який нам потрібно завантажити з репозиторію проекту Lazy Line Painter, потрібно перенести в наш проект лише 2 файли. Перший це 'jquery.lazylinepainter-1.1.min.js'(версія плагіна може відрізнятись) він знаходиться в корені отриманої папки. Другий це example/js/vendor/raphael-min.js.

Ці два файли поміщаємо в папку js. І підключаємо їх до нашого index.html перед main.js наступним чином:

3. Намалювати круту картинку в Adobe Illustrator

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

Для прикладу можна скористатися іконками у вкладенні.

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

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

6. Додати трохи CSS до смаку
Видаляємо з index.html абзац

Hello world! Це HTML5 Boilerplate.

І замість нього вставляємо блок, в якому відбуватиметься наша анімація.

потім додаємо трохи CSS у файл main.css для більш приємного оформлення:

Body ( background:#F3B71C; ) #icons ( position: fixed; top:50%; left:50%; margin: -300px 0 0 -400px; )

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

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

Всім привіт! Сьогодні спробую зробити опис можливостей програми Adobe Illustrator, порівнюючи її з можливостями флешу Це буде не глобальний розбір програми по кісточках, а скоріше опис деяких цікавих фішокя відкрила для себе в цій програмі. Інформацію збирала по шматочках у міру вивчення, щоби викласти все в одному пості. Відразу зізнаюся, що я не супер-досвідчений користувач ілюстратора, лише останні півроку використовую його в малюванні (до цього все малювала у флеші). Багато хто нарікає, що ілюстратор складний, інтуїтивно не завжди зрозумілий. Певною мірою я згодна, що після флешу ця програма складна. Але головне не кидати, а продовжувати вивчення. І через кілька тижнів з'являється думка, як я раніше без нього обходився!

Отже, що мені сподобалося в ілюстраторі, і що я знайшла для себе такого, чого немає у флеші.
1. Почну з самого просто, але водночас потрібного. Спробуйте у флеші розташувати об'єкти по колу. Раніше був Deco Tool, Але його прибрали, мабуть, вважали за непотрібне. Вирішили, що ручками це робити веселіше. В ілюстраторі ця функція є: Effect – Distort&Transform – Transform.

Все швидко і просто, значення (відстань між об'єктами, кількість копій) задаємо самі в налаштуваннях.

2. Зиг-заг

Ще більш проста, але корисна штука. Здавалося б, дрібниця, але у флеші треба малювати вручну, в ілюстраторі це секундна справа.

3. Деформація об'єктів (Warp)

Нічого подібного у флеші нема. На прикладі внизу я показала лише 2 способи деформації простих форм (Effect – Warp – Arc/Fish). Насправді їх 15 у останньої версіїпрограми.

4. Автоматичне заокруглення кутів (Round Corners)

Можна робити вручну: на графічному об'єкті при виділенні в кутку (у всіх кутах) з'являється біла крапка і знак округленої лінії. Тягнемо мишкою, регулюємо на свій смак.

Але це стосується лише форм, з олівцевою лінією трохи інакше – застосовуємо ефект заокруглення ( Effect – Stylize – Round Corners). На виході отримуємо той самий результат.

5. Roughen (огрубіння)

Ефект застосовується до простим формам (Effect – Distort&Transform – Roughen). На виході отримуємо щось, що нагадує низькополігональні 3д-моделі. По-моєму, круто:) І головне дуже просто.

6. Pucker&Bloat(Втягування та Роздування)
Приклад на зображенні нижче:

7. Розширення форми (Offset Path)

У флеші є функція Expand Fill (розширення заливки), з лініями олівцями взагалі не працює, на відміну від ілюстратора.

8. Кисті (Art Brush, Pattern Brush, Scatter Brush)
Дивимося ні малюнок нижче з прикладами:

9.Texture Brush (Текстурні Щітки)

Також в ілюстраторі представлено багато текстурних пензлів, про які я писала, і про те, як вони з'явилися в нової версіїфлеша - . Було помічено, що використання кистей у Adobe Animate страшенно гальмує. Ось такі справи:(

10. Не впевнена, що це пряма хитрість, але хочу зупинитися на пензлику із забавною назвою BlobBrush. Знаходиться на панелі інструментів, дуже приємна у використанні пензель. Має купу налаштувань, подобається мені більше за звичайну. На словах важко пояснити її переваги, краще один раз спробувати.

10.Split to Grid

Також корисна штука – функція Split to Grid (Object-Path-Split to Grid). Дозволяє розрізати форму на рівні відрізки. Що нам це нагадує? Правильно – вікна у багатоповерхівці. Як на мене, кльова штука для малювання, наприклад, міських пейзажів;)

Ще один корисний інструмент, представлений в ілюстраторі, мабуть з часів його першого релізу. З його допомогою можна створювати, наприклад, текстури дерева:

12. Move (правою – Transform – Move)

Усунення об'єкта на задану відстань. При бажанні можна відразу створити копію, яка буде розміщуватися на потрібній відстані від вибраного об'єкта по горизонталі/вертикалі. У більш ранній версії флешу був плагін, який виконував цю функцію. На жаль, не пам'ятаю його назви.

В ілюстраторі дуже зручно створювати безшовні патерни ( Object-Pattern-Make). Пам'ятаю, як я несамовито вигадувалась у флеші зі створенням. В ілюстраторі версії СС 2015 все автоматизовано, купа налаштувань допоможе зліпити патерн у десятках варіацій, маючи під рукою лише кілька графічних елементів. У ранніх версіях програми все доводилося робити вручну, як у флеші досі.

(На замітку – патерн можна зробити векторним редагованим об'єктом за допомогою функції розібрати ( Object – Expand Appearence).

14. Object Mosaic (Мозаїка)

Створення палітри кольорів на основі наявної картинки. Імпортуємо картинку, що сподобалася, в ілл (Open), далі Object – Create Object Mosaic. У налаштуваннях вказуємо частоту поділу у висоту та ширину.

І на виході отримуємо:

15.Blend (Змішування)

Використовується для створення градієнтів. Можна створювати покрокові переходи, як, наприклад, на зображенні. Не скажу, що використовую часто, але може комусь знадобиться. Мені здається, можна використовувати для створення нескладних фонових картинок.

Також можна використовувати інструмент для клонування об'єктів. Розміщуємо два об'єкти на відстані один від одного і застосовуємо Blend Options, вибираємо кількість кроків (кількість об'єктів, що клонуються).

16. Інструмент Build Shape Tool.Дуже зручна штука для роботи із примітивами. У флеші, як мені здалося, менш зручно.

Затискаючи Alt та клацаємо по виділених сегментах – видаляємо сегменти. Якщо просто простягаємо мишкою по кількох виділених ділянках – з'єднанням.

Додаток – інструмент, який допомагає автоматично відрізати, з'єднувати тощо. виділені форми. Як на мене, він не дуже зручний, частіше користуюсь BuildShapeTool.

(монтажні області)

18.Custom Tool Panel

Можливість самому створювати свою панель інструментів, відкинувши непотрібні, а вибрати ті, які використовуєш.

У флеші монтажні області, а саме сцени ( Scene 1,2,3.) розташовані окремо і між ними потрібно перемикатися (Shift+F2). В ілюстраторі їх все можна розташувати перед очима. Зручно, коли робиш кілька варіантів того самого малюнка, щоб усі варіанти були перед очима для порівняння.

19.Ізометрія за допомогою Graphic Styles

І останнє - створення ізометрії без використання в 1 клік (а якщо точніше, в 3 кліки, тому що сторін у нас 3;) за допомогою графічних стилів ( Graphic Styles). Як це робиться, розпишу наступного разу.

Спільне з флеш у ілюстратора – можливість зберігати об'єкт у символ (symbol) і так само без проблем цей символ можна перенести у флеш (відкрити у флеші.ai файл, шляхом Import – Import до stage).
Символ в ілюстраторі має такі ж властивості, як у флеші.
І на завершення напишу, що в ілюстраторі, на мою думку, поступається флешем. Так-так, і таке є. І це інструмент заливання ( Paint Bucket). Як не намагаюся звикнути до неї в іллі, у флеші вона зручніша.
Якщо мої нотатки стали для вас корисними або щось від себе хочете доповнити – велкам у коментарі! Всім удачі;)

Формат файлу Flash (SWF) заснований на векторної графікиі призначений для масштабованої компактної графіки для Інтернету. Так як цей формат файлу заснований на векторній графіці, об'єкт зберігає якість зображення за будь-якої роздільної здатності і ідеальний для створення кадрів анімації. У Illustrator можна створити окремі кадри анімації на шарах, а потім експортувати шари зображення в окремі кадри для використання на веб-сайті. Можна також визначити символиу файлі Illustrator для зменшення розміру анімації. При експорті кожен символ визначається у SWF-файлі лише один раз.

Команда «Експортувати» (SWF)

Забезпечує найбільший контроль над анімацією та бітовим стисненням.

Забезпечує більше контролю над сумішшю форматів SWF та бітового у фрагментованому макеті. Ця команда пропонує менше параметрів зображення, ніж команда «Експортувати» (SWF), але використовує останні параметри команди «Експортувати» (див. ).

Під час підготовки об'єкта до збереження у форматі SWF пам'ятайте наведені нижче рекомендації.

За допомогою програми Device Central можна побачити, як виглядатиме графічний об'єкт Illustrator у програмі Flash Playerна різних кишенькових пристроях.

Вставлення графічного об'єкту Illustrator

Створений у програмі Illustrator графічний об'єкт можна швидко, просто і легко скопіювати і вставити у програму Flash.

При вставці графічного об'єкта Illustrator у Flash зберігаються такі атрибути.

Контури та фігури

• Товщина штрихів

  Визначення градієнтів

  Текст (включаючи шрифти OpenType)

  Пов'язані зображення

• Режими накладання

Крім того, Illustrator та Flash підтримують наступні можливості при вставці графічного об'єкта.

При виділенні у графічному об'єкті Illustrator шарів верхнього рівняповністю та вставці їх у додаток Flash зберігаються шари та його властивості (видимість і блокування).

Кольорові формати Illustrator, відмінні від RGB (CMYK, градації сірого та формати користувача), перетворюються програмою Flash у формат RGB. Кольори RGB вставляють звичайним чином.

При імпорті або вставці графічного об'єкта Illustrator можна за допомогою різних параметрів зберегти певні ефекти (наприклад, тінь, що відкидається текстом) у вигляді фільтрів Flash.

Flash зберігає маски Illustrator.

Експорт SWF-файлів із програми Illustrator

SWF-файли, що експортуються з програми Illustrator, відповідають за якістю та ступенем стиснення SWF-файлам, що експортуються з програми Flash.

При експорті можна вибрати один із численних заздалегідь заданих стилів, що забезпечують оптимальний висновок, та вказати спосіб використання кількох монтажних областей, спосіб перетворення символів, шарів, тексту та масок. Наприклад, можна вказати експорт символів Illustrator у вигляді роликів або графічних зображень, а також створення SWF-символів із шарів Illustrator.

Імпорт файлів Illustratorу додаток Flash

Щоб створити повний макет у програмі Illustrator, а потім імпортувати його до програми Flash за один крок, можна зберегти графічний об'єкт у власному форматі Illustrator (AI) та імпортувати його з високою точністю у програму Flash за допомогою команд «Файл» > «Імпортувати до робочої область» або «Файл» > «Імпортувати до бібліотеки».

Якщо файл Illustrator містить декілька монтажних областей, виберіть монтажну область для імпорту у діалоговому вікні «Імпорт» програми Flash та вкажіть налаштування для кожного шару в цій монтажній області. Усі об'єкти у вибраній монтажній області імпортуються у Flash як єдиний шар. При імпорті іншої монтажної області з того ж файлу AI об'єкти з цієї монтажної області імпортуються до Flash як новий шар.

При імпорті графічного об'єкта Illustrator у вигляді файлів AI, EPS або PDF Flash зберігає ті ж атрибути, що й при вставці графічних об'єктів Illustrator. Крім того, якщо імпортований файл Illustrator містить шари, їх можна імпортувати одним із таких способів.

Перетворити шари Illustrator на шари Flash.

Перетворити шари Illustrator на кадри Flash.

Перетворити всі шари Illustrator на один шар Flash.

Adobe Illustrator and After Effects
Імпорт та проста анімація

Вітання. Сьогодні на розгляді проста анімація у After Effects.

Ресурси: Adobe Illustrator CC
Adobe After Effects CC

Почнемо вивчення з малювання у Illustrator.

Малюємо
1) Намалюємо як тло Прямокутник жовтого кольору

Малюнок 1 - Rectangle

2) Намалюємо Коло і заллємо градієнтом
Попрацюємо трохи над колом:
- Видалимо нижню точку на контурі, отримаємо дугу;
- проведемо пряму лінію, закривши низ дуги, отримаємо півколо

Малюнок 2 - 1) draw circle; 2) gradient; 3) delete point

3) Малюємо Прямокутник і робимо його копію
- Один прямокутник сірий;
- інший прямокутник темно-сірий
4) Малюємо Трикутник із зірочки встановивши число променів - 3

Малюнок 3 – 1) rect light; 2) rect dark; 3) triangle

5) Малюємо кота за допомогою Pen та простих фігур

Малюнок 4 – 1) head; 2) neck; 3) body; 4) ноги; 5) tail

А тепер самий ГОЛОВНИЙмомент
Розподілимо картинки по шарах (те що буде анімовано - на окремий шар) ось так:

Малюнок 5 - all pics (red mark important layers)

Все тепер зберігаємо.
Подивимося налаштування збереження

Малюнок 6 - Save

А тепер наступний етап. ЗакриваємоAdobe Illustrator та відкриваємо After Effects.

Імпорт до After Effects
File – Import – File – вибираємо наш збережений файл Illustrator.
Виберемо , щоб імпортувати шари з Illustrator, якщо поставимо footage, то отримаємо картинку з об'єднаними шарами, а цього не потрібно.

Малюнок 7 - Import As Composition

Все імпортували.
А тепер побачимо, що в нас є. Подвійне клацання по композиції , Що відкрилося і ми побачили шари (якщо все правильно зробили, то буде кілька шарів). Отримаємо таке, див.

Малюнок 8 - Open Composition

А тепер те, для чого ми тут сьогодні зібралися – Анімація.

Анімація в After Effects
Встановимо точку обертання у стрілки вгорі її за допомогою Pan Behind Tool ( швидка клавіша- Y). Просто беремо крапку і переміщуємо туди, куди потрібно. В результаті це буде виглядати так.

Малюнок 9 - Pan tool and Layers

Ну все тепер переходимо до шарів для анімації.
Нам буде потрібно шар Arrow та Head_cat.
Почнемо з arrow.
Розкриємо список, знайдемо та натиснемо на годинник. Так ми поставили першу крапку на нульовій секунді. Усього анімація триватиме 2 секунди.
Отже, ось такі налаштування треба зробити (всього поставимо 3 крапки)

Second	0	1	2
	+66	- 70	+66

Ось так це виглядатиме:

Рисунок 10 - Rotation arrow

А тепер анімуємо голову кота.
Розкриємо head_cat та знайдемо Position.
Тут буде чотири точки.
Змінюватиме лише останню координату не чіпаючи інші.

Second	0.1	0.17	1.12	2.0
Position	689.3	729.3	729.3	689.3

Дивимося на картинку.

Малюнок 11 - Position head

Отже, принцип анімації був такий. Стрілка гойдається з боку в бік, як тільки наближається до кошеня, він втягує голову в себе, затримується в цьому положенні небагато, а потім повертає її на місце.

Заключний етап

Production
Потрібно створити готовий продукт зі свого твору.
Ідемо в меню - Add to Render Queue
Відкриється панель Render і в Output Module (два клацання) виберемо формат виходу. Я взяла *.mov

Малюнок 12 - Render

Натискаємо на кнопку RENDER та отримуємо результат (тільки не забудьте вказати шлях).
На цьому все.

Сьогодні у нас не зовсім звичайний урок Adobe Illustrator. Тому що цього разу ми будемо робити не статичну картинку, а справжнісіньку анімацію. Уявіть собі, виявляється з допомогою Adobe Illustrator можна ще й мультики малювати:)

А знадобиться нам для цього всього нічого. Грамотна організація шарів та експорт кінцевої роботи у формат swf, де кожен шар перетворюється на кадр анімації. У сьогоднішньому уроці ми намалюємо анімацію зворотного відліку у стилі ретро фільму. На виході повинен вийде флеш ролик із цим зворотним відліком.

Перше, що потрібно зробити, це намалювати все необхідні елементидля майбутньої анімації. Для цього я в окремому документі зробив дві позиції кадру кіноплівки, коло для відліку, яке розрізано на окремі сектори, текстуру та вертикальну подряпину, щоб додати ефект старовини, а також усі цифри та написи.

Коли всі запчастини нашого мультика готові, можна розпочинати створення самої анімації. Для зручності це краще робити у новому документі. При цьому шари у нас відіграватимуть роль кадрів анімації. І в перший шар якраз потрібно скопіювати кадр кіноплівки. Розташуйте його посередині робочої області.

Тепер створіть другий шар і скопіюйте в нього кадр фільму, в якому отвори по краях зроблені зі зсувом. Його теж потрібно розташувати центром.

З цих двох шарів вже можна отримати анімацію плівки, що рухається. Але згодом нам знадобиться набагато більше шарів. Тому виділіть два перші шари, зайдіть в опції панелі та зробіть копію шарів.

Подібним чином нам потрібно накопичувати 12 шарів із кадрами кіноплівки, що задають її рух.

Ось тепер у нас ціла купа шарів, і всі вони видно. У тому сенсі, що верхні шари загороджують нижні, що не дуже зручно для роботи. Тому можна вимкнути якісь шари, натиснувши на іконку з вічком зліва від назви шару. Щоб вимкнути або ввімкнути відразу всі шари, тримайте Alt, коли натискаєте на іконку вічка. Включаючи та вимикаючи шари, ви можете бачити саме те, що розташоване у певному кадрі нашої майбутньої анімації. І зараз, щоб нам додати до руху плівки легке тремтіння, потрібно посувати отримані кадри трохи в різні боки. Для цього вмикайте тільки той шар, з яким збираєтеся працювати в Наразі, а потім зрушайте кадр на пару пікселів у будь-який бік.

Коли ви перебрали всі шари і додали невеликий зсув, можна приступати до створення анімації кола, що рухається. Для цього скопіюйте коло, що складається із секторів, із документа із запчастинами мультфільму та поставте її на першому шарі поверх кадру кіноплівки.

Якщо зняти з кола виділення, він виглядатиме як єдине ціле. Саме це нам і потрібне.

Але оскільки він складається з окремих секторів, то можна, змінюючи їх колір, дуже швидко та легко створити анімацію. Для цього скопіюйте це коло у другий шар і зробіть перший сектор світлішим. Ви пам'ятаєте, що плівка у нас тремтить під час руху, тому зовсім не обов'язково ставити коло точно у центр кадру. Розташовуйте його на око.

Подібним чином потрібно копіювати коло кожного наступного шару, при цьому зафарбовувати світлішим кольором на один сектор більше, ніж у попередній раз. Всі разом ці 12 шарів утворюють анімацію руху плівки з колом, що заповнюється.

Далі потрібно додати текстуру до наших шарів. Включаємо перший шар і копіюємо туди текстуру з вихідного файлуіз запчастинами.

Потім по черзі включаємо такі шари і копіюємо туди цю саму текстуру. Щоб вона виглядала по-різному на кожному кадрі просто повертайте її на кут 90 градусів. Як ви вже здогадалися, нам потрібно додати текстуру до 12 кадрів.

Якщо вам вже набридло копіювати, то можу вас порадувати - залишилося зовсім небагато. Найскладніше вже позаду. Залишилося додати вертикальні подряпини, і майже все. Для цього знову ж таки копіюємо вихідну подряпину і ставимо її в довільне місце в кілька шарів. У моєму випадку подряпини з'являються лише у двох шарах.

Тепер, коли готовий основний цикл із анімацією плівки, залишилося додати цифри. Так як відлік у нас йде з 3 до 1 плюс ще слово Go!, то нам потрібно ще більше шарів. Не 12, а 48. Для цього потрібно зробити ще три копії вже готових шарів з анімацією плівки.

А далі все просто. Включаємо перший шар і ставимо туди цифру три.

Потім потрібно копіювати цю цифру в наступні шари, доки не закінчиться анімація кола. Коли ви дійдете до наступної копії шарів, де коло знову буде повністю зафарбовано, потрібно ставити вже цифру два. Так само скопіюйте в потрібні шари цифру один. А коли ви дійдете до заключних шарів, призначених для напису Go!!!, просто видаляйте коло, перш ніж скопіювати напис в потрібний шар.

На цьому з анімацією все. Головне тут – не заплутатися. Можна давати шарам якісь зручні назви, але мені було якось ліньки:) І ще, коли ви закінчите роботу, обов'язково включіть назад усі шари, натиснувши на іконку вічка.

У вікні з налаштуваннями експорту обов'язково встановіть Export As: AI Layers to SWF Frames. Саме ця опція перетворює шари ілюстратора на кадри анімації. Далі натисніть Advanced.

Відкриються додаткові налаштування. Тут необхідно встановити частоту кадрів Frame Rate. У мене коштує 12 кадрів за секунду. Галочка Looping відповідає за циклічність анімації. Завдяки їй ролик відтворюватиметься по колу. І опція Layer Order: Bottom Up відтворює шари ілюстратора знизу нагору в панелі. Саме так ми й будували нашу анімацію.

На виході отримуємо флеш ролик із нашою анімацією.

Тепер ви бачите, що просту анімацію робити в Adobe Illustrator не так вже й складно, як здається на перший погляд.

Але для створення довгих роликів або інтерактивних додатків все ж таки краще використовувати Adobe Flashчи інші флеш редактори. Наприклад, цього кота я робив у старенькому Macromedia Flash, який відкопав у себе на роботі.

Також останнім часом все частіше для створення анімації застосовується HTML5 та CSS3. Цей кодпідтримується сучасними браузерамиі не потребує використання флеш плеєра.

Роман aka dacascasспеціально для блогу

Підпишіться на нашу розсилку, щоб не пропустити нічого нового: