Експорт Анімації ефектів до HTML5

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

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

• Професійне керівництво до дизайну UI

Розробники покладалися на такі бібліотеки, як Greenensock та Snap.Svg, щоб зробити важкий підйом у відтворенні анімації через JavaScript. Хоча ці інструменти дали велику гнучкість, вони не можуть порівнювати з точністю та тонкістю анімації, яку можна досягти Після ефектів CC Власна шкалу та полегшення графіків. З веб-перспективи, після того, як ефекти дуже добре підходить для налаштування та пробуття руху, перш ніж вчинити його до коду.

Вводити Тіламовина , новаторське розширення для Adobe After Effects, які експортують анімацію безпосередньо від ефекту до JavaScript, щоб відображатись та маніпулювати в браузері. Створено Гернан Торрісі , Бодмовина видаляє багато бар'єрів між аніматором та розробником. На своєму базовому рівні плагін виступає як магічний "рендеринг для веб-сторінок" Adobe забув. На його найбільш розвинуті він відкриває нові можливості для інтерактивної анімації.

BodyMovin - це посилання в ланцюжку інструментів, плагінів та систем, що піднімаються, щоб задовольнити деякі з цих нових можливостей. Lottie Airbnb і Ключові кадри Facebook Обидва будувати ці фундаменти - і вони, нарешті, доводить найпотужніший інструмент анімації до Інтернету.

Навіщо використовувати bodymovin?

SVG взяв через Інтернет і приніс з нею очікування, що все повинно бути високою якістю, легким і масштабованим. BodyMovin надає все у вашій композиції, щоб красиво crisp svg, який зберігає свою векторну якість у будь-якому розмірі. Немає більше компромісів для полегшення того, що GIF або змушуючи своїх користувачів завантажувати роздуті відеофайли.

А також спрощення процесу експорту вашої анімації, орган BodyMovin відкриває більше потенціалу для розробників, щоб отримати творчість з новими інтерактивними враженнями. Ознайомтеся з кодеком для деяких фантастичних способів використано розширення - від інтерактивних текстових зображень IK до інтерактивного тексту ANIMATE-AS-ви-типу.

Для подальшого спрощення роботи веб-дева, спробуйте Веб-будівельник .

Експортовану анімацію можна маніпулювати в браузері, як будь-який інший елемент, що дозволяє нам думати про анімацію як інтерактивний та експериментальний інструмент у веб-дизайні. І тепер через Бодмовін, приносять вашу анімацію до Інтернету, ніколи не було легше. У цьому підручнику ви дізнаєтеся, як експортувати анімацію від After Effect, і створити просту анімацію циклу, яка відповідає на клік користувача.

Як підготувати файли після ефектів

Підтримка функцій після ефектів значною мірою покращилася, і ви можете очікувати, щоб отримати досить хороші результати прямо з коробки. Це, сказане, ваші фантастичні літаючі 3D-шари не будуть грати добре, тому пам'ятайте про межі, перш ніж почати. Перш ніж почати проект, завжди завантажте останню версію bodymovin та перевірте сторінку github, щоб переглянути, які функції підтримуються.

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

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

Піклуйтеся з масками

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

Рендеринг

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

Подумайте, що ваші файли добре йти? Відкрийте розширення bodymovin через вікно & gt; Розширення, а потім тіламовін.

Після того, як ви натиснете оновлення, ви побачите список усіх композицій у цьому етапі проекту. Виберіть вибраний Comp, а потім виберіть папку призначення всередині веб-проекту. Коли ви щасливі, просто натисніть Render і подивіться магію. Коли це зроблено, ви отримаєте повідомлення "Готовий". Вітаємо! Ви тільки що експортували файл JSON з усією інформацією, яку програвач повинен відтворити анімацію.

Щоб перевірити свою нову експортну анімацію, натисніть кнопку Попередній перегляд & GT; Поточні пропозиції та пам'ятайте, що ви можете помітити щось, що виглядає трохи відрізнятись до того, що ви очікуєте. Якщо ви робите плями будь-які проблеми, стрибайте назад і перевірте свої шари - це може бути непідтримувана функція або вираз, що використовується після ефектів.

Деякі після ефективних плагінів, таких як гумова, зараз підтримують орган тіла. РУБОРСЬКА ВИКОРИСТОВУЄТЬСЯ ВИКОРИСТОВУВАТИ КЕРІВНИЙ ШАРИ І СВІТАННЯ. Щоб активувати ці, просто натисніть на налаштування COG поруч із вибраним складом та позначте потрібні вам функції.

Якщо все виглядає добре, є ще одна річ, яку ви повинні зробити, перш ніж залишити після наслідків. На цьому етапі ви повинні мати новий файл data.json, що описує вашу анімацію, але ніякого хлопчика не треба інтерпретувати. У розширенні натисніть кнопку "Отримати програвач" у верхньому правому куті та збережіть його з файлом JSON.

Завантажте анімацію

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

Спочатку зробіть новий контейнер #anim_container утримувати анімацію. Вам також потрібно включити bodymovin.js Файл до закриття тегу тіла. Наступний розповідай Бодмовін все про вашу анімацію та завантажте його в новий контейнер.

Давайте пройдемо поступову крок за кроком:

 var container = document.getlementByid ('an anim_container');
// Налаштуйте нашу анімацію

var animdata = {
Контейнер: контейнер,
Renderer: 'svg',
Автозаповнення: Правда,
петля: правда,
Шлях: 'data.json'
};
var anim = bodymovin.loadanimation (animdata); 

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

Властивість шляху розповідає муразі BodyMovin, де знайти файл даних JSON для анімації. Завдяки політиці розподілу ресурсів перехресного походження (Cors) техніка, яку ви будете використовувати для доступу до файлу JSON, буде працювати лише, якщо ви знаходитесь на сервері або локальному сервері. Щоб працювати локально, ви можете зробити це data.json у файл JavaScript, який призначає об'єкт до змінної. У цьому випадку ваша установка може виглядати так:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; сценарій & gt;
var container = document.getelementByid ('an anim_container');
// Налаштуйте нашу анімацію
var animdata = {
Контейнер: контейнер,
Renderer: 'svg',
Автозаповнення: Правда,
петля: правда,
АнімаціяData: Дані
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Оновити сторінку, і ваша анімація повинна грати всередині контейнера. Виберіть із інструментами Dev, і ви побачите, що кожен елемент у анімації тепер міститься в & lt; g & gt; Теги, і перетворюється в режимі реального часу.

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

BodyMovin має ряд потужних методів контролю анімації після його завантаження. Виклик такого методу anim.pause () або anim.setdirection () дозволить вам маніпулювати відтворенням по-різному. Давайте подивимося на деякі приклади:

• anim.setdirection (-1) буде грати анімацію в зворотному напрямку
• anim.pause () і anim.play () почнеться і зупиняє анімацію
• anim.setspeed (0,5) буде грати анімацію на половину швидкості

Додавання взаємодії

На наступному кроці ви вивчите кілька різних способів додати взаємодію до вашої анімації через JavaScript. У цьому прикладі ми експортуємо анімацію після ефектів з двома секціями: розділ А та розділ B. Розділ Використовує кадри від одного до 20 (трикутник зберігає свою палицю Pogo). Використовує кадри від 20 до 40 (трикутник стрибає вгору і вниз на палиці пого).

Тепер ви хочете відтворити розділ A на петлі (лише після того, як клацніть користувачем) Play та Loop розділ B. Ви можете скористатися властивістю PlayGments, щоб розділити анімації таким чином. Цей метод займе два аргументи - масив з початковими та кінцевими значеннями, а другий булер - цефраметр. Встановлення цього до True буде скаже анімацію, щоб прочитати значення початку та кінцевих кадрів, тоді як False скаже це, щоб прочитати ці значення, як час.

 anim.pause ();
anim.playsments ([0,20], true); 

Додавання цього розповідає BodyMovin, щоб призупинити при першому кадрі та відтворюйте лише анімацію від 0 до 20 кадрів. Як ви налаштували анімацію з цикл: Правда Властивість це продовжуватиме грати розділ знову і знову.

Давайте створимо весь приклад. Ви будете використовувати два сегменти анімації для цього прикладу, тому ви створите дві функції:

 var container = document.getlementByid ('an anim_container');
// Налаштуйте нашу анімацію
var animdata = {
Контейнер: контейнер,
Renderer: 'svg',
AutoPlay: False,
петля: правда,
Шлях: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// Коли анімація завантажується, запустити нашу функцію FirstLoop
anim.addeventlistener ('domboaded', firstloop);
// Створіть наші функції відтворення
Функція FirstLoop () {
anim.playsments ([0,20], true);
};
функція другогополучення () {
anim.playsments ([20,40], true);
};
// слухайте подію клацання
container.addeventlistener ("Click", функція (подія) {
anim.addeventlistener ('loopcomplete', secondloop);
}); 

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

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

• спокійний - кадр від 0 до 20
• перехід - кадр від 20 до 30
• спортивний - кадр від 30 до 50

Ми хочемо, щоб ваша анімація залишилася в першій петлі, поки вона не натиснута. У той момент ви хочете чекати кінця циклу, який ви в даний час перейдіть до переходу. Після того, як перехід здійснюється переміщення до другої петлі. Це звучить складно, але залишитися зі мною! Ось ваш код повністю:

 var container = document.getlementByid ('an anim_container');
// Налаштуйте нашу анімацію
var animdata = {
Контейнер: контейнер,
Renderer: 'svg',
AutoPlay: False,
петля: правда,
Шлях: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// Коли анімація завантажується, запустити нашу функцію FirstLoop
anim.addeventlistener ('domboaded', firstloop);
// Створіть наші функції відтворення
Функція FirstLoop () {
anim.playsments ([0,20], true);
};
Функціональний перехід () {
anim.playsments ([20,30], true);
anim.removeeventlistener ('loopcomplete');
anim.addeventlistener ('loopcomplete', secondloop);
};
функція другогополучення () {
anim.playsments ([30100], true);
anim.removeeventlistener ('loopcomplete');
};
// слухайте подію клацання
container.addeventlistener ("Click", функція (подія) {
anim.addeventlistener ('loopcomplete', перехід);
}); 

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

Це воно!

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

Сподіваємось, цей підручник дасть вам уявлення про різні способи, які ви можете поєднати використання після ефектів та тіла, щоб створити деяку суперкухову анімацію для Інтернету!

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

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

Отримав багато файлів для резервного копіювання? Ознайомтеся з нашим хмара зберігання вибирає.

Ця стаття спочатку з'явилася чистий журнал У 2017 році. Підписатися тут .

Читати далі:

• Створюйте та анімутні багатокутники SVG
• 14 дивовижний Adobe Після плагінів ефектів
• Створіть розкадрування для веб-анімації