Анімація на HTML5 з допомогою GreenSock Animation Platform

днями я спробував перемалювати банер, який я раніше робив у Animate CC з експортом в CreateJS на платформі GSAP, використовуючи простий HTML і пару JS бібліотек.


Відразу обмовлюся, що робота вийшла по-більшій частині дослідного характеру і поки використовувати напрацювання в роботі я не збираюся з ряду причин, які наведені в кінці статті. Тим не менш, інструмент виявився достатньо простим у використанні «з першого наскоку» і я рекомендую його всім, хто хоче додати на свої сторінки різноманітні «эффектики».

Не так давно один автозавод прислав мені банер, який потрібно було вставити контактні дані дилера для реклами на місцевих ресурсах. Розпакувавши архів я не побачив нічого, крім готового html і папок із зображеннями та скриптами. Я подумав, що це банер без оригіналу (постійно працюю на Animate CC) і поліз подивитися, що у нього всередині. Усередині виявилася звичайна верстка, а скрипт з 20 рядків анимировал всі нехитрі нутрощі. Банер я змінив і поліз дивитися, що ж це таке, GSAP і TimelineLite.

Просте і зрозуміле відео з прикладом

Не так давно видалася вільна хвилинка і я переверстал один з моїх готових банерів на GSAP
CreateJS GSAP
Я спеціально не включав із документ GSAP шрифти, але як вставляються свої шрифти в HTML-документ і так знає кожен, а от у Animate CC цей процес трохи нетривіальне, досить часто я просто перекладаю в криві тексти у вихідному файлі, щоб документ був менше за розміром

Плюси GSAP
  1. Анімація будь-якого CSS властивості. Біль, горе і ганьба Animate CC/CreateJS з дефолтовыми фильтами Animate CC — розмиттям, тінями і іншими речами, які давно є в CSS, але не підтримуються (або підтримуються погано) всередині canvas CreateJS
  2. Нативні шрифти і згладжування. Будь-який шрифт, який завгодно, можна вставити в HTML-документ і не морочитися, результуючий файл не буде зростати в залежності від набору букв, що використовуються в документі. Зміна шрифту у всьому банері парою слів в CSS
  3. Easing «з коробки». В Aniimate CC треба постійно тягати криву easing-функції, тут я не зробив нічого, щоб отримати гарне уповільнення елементів
  4. СЕК. В документі Animate може спостерігатися сильна залежність продуктивності від FPS, постійно доводиться підбирати оптимальні значення для кожного конкретного випадку, щоб не витрачати багато ресурсів CPU. В моєму прикладі на комп'ютері різниця була незначною, але на телефонах — досить сильною. А після того, як почитаєш рекомендації, взагалі залишається тільки гадати, що ж там не гальмує
  5. Адаптивність. Медіа-запити — це завжди набагато простіше, ніж вважати ширину/висоту всередині ролика скриптами. Гумовий DIV, на відміну від гумового елемента canvas не їсть ресурсів взагалі
  6. Анімація будь-якого елемента на сторінці. Можна легко «розфарбувати» існуючу верстку буквально за кілька хвилин
  7. Відсутність(або зміна) поняття ключових кадрів. Елемент верстається, наприклад, в тому місці і з тими властивостями, з якими він повинен бути в кінці анімації і за допомогою директиви from йому задаються властивості, з яких він анимируется у поточний стан. Або за допомогою директиви to йому вказується кінцевий стан
  8. Відносна простота. Не потрібно додаткове ПО, код дуже простий і компактний


Плюси Animate CC
Застосовно до банерів, для анімації елементів на сторінці ці проблеми малозначні.

  1. Таймлайн і шари. В багатошаровому банері в голому HTML доводиться постійно сделить за z-index, коли в Animate можна просто поміняти порядок шарів як заманеться. Одночасна анімація декількох шарів також візуально не представлена. Зміна порядку кадрів в Animate CC також наочно простіше
  2. Вкладені мувиклипы зі своєю анімацією. Поки не розбирався, як це робиться в GSAP, але, розумію, що доведеться писати іншу окрему функцію для іншого таймлайна


у підсумку
Маємо класичну ціпок про два кінці: можна використовувати будь-який редактор, але потрібно стежити за розташуванням шарів і перераховувати z-index в голові. Виграш в продуктивності і простоти реалізації може пересилити відсутність візуальних інструментів редагування таймлайна. Кому-то може навпаки більше сподобатися виключно скриптова анімація. Час розробки банера на GSAP прямо пропорційно кількості елементів всередині контейнера. Легкість анімації елементів на вже готової сторінці — однозначно плюс даної бібліотеки, і для сайтів я її обов'язково буду застосовувати в майбутньому, але для банерів поки що час розробки критично, тут треба дивитися в кожному конкретному випадку, що буде зручніше.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.