Анимация на HTML5 с помощью GreenSock Animation Platform
На днях я попробовал перерисовать баннер, который я раньше делал в Animate CC с экспортом в CreateJS на платформе GSAP, используя простой HTML и пару JS библиотек.Сразу оговорюсь, что работа получилась по-большей части исследовательского характера и пока использовать наработки в работе я не собираюсь по ряду причин, которые перечислены в конце статьи. Тем не менее, инструмент оказался достаточно простым в использовании «с первого наскока» и я рекомендую его всем, кто хочет добавить на свои страницы разнообразные «эффектики».
Не так давно один автозавод прислал мне баннер, в который нужно было вставить контактные данные дилера для рекламы на местных ресурсах. Распаковав архив я не увидел ничего, кроме готового html и папок с изображениями и скриптами. Я подумал, что это баннер без исходника (постояно работаю на Animate CC) и полез посмотреть, что у него внутри. Внутри оказалась обычная верстка, а скрипт из 20 строк анимировал все нехитрые внутренности. Баннер я изменил и полез смотреть, что же это такое, GSAP и TimelineLite.
Простое и понятное видео с примером
Не так давно выдалась свободная минутка и я переверстал один из моих готовых баннеров на GSAP
| CreateJS | GSAP |
|---|---|
 |
 |
Я специально не включал с документ GSAP шрифты, но как вставляются свои шрифты в HTML документ и так знает каждый, а вот в Animate CC этот процесс немного нетривиален, достаточно часто я просто перевожу в кривые тексты в выходном файле, чтобы документ был меньше по размеру
Плюсы GSAP
- Анимация любого CSS свойства. Боль, скорбь и позор Animate CC/CreateJS с дефолтовыми фильтами Animate CC — размытием, тенями и прочими вещами, которые давно есть в CSS, но не поддерживаются (или поддерживаются плохо) внутри canvas CreateJS
- Нативные шрифты и сглаживание. Любой шрифт, какой угодно, можно вставить в HTML-документ и не заморачиваться, результирующий файл не будет расти в зависимости от набора букв, используемых в документе. Изменение шрифта во всем баннере парой слов в CSS
- Easing «из коробки». В Aniimate CC надо постоянно таскать кривую easing-функции, здесь я не сделал ничего, чтобы получить красивое замедление элементов
- FPS. В документе Animate может наблюдаться сильная зависимость производительности от FPS, постоянно приходится подбирать оптимальные значения для каждого конкретного случая, чтобы не расходовать много ресурсов CPU. В моем примере на компьютере разница была незначительной, но на телефонах — достаточно сильной. А после того, как почитаешь рекомендации, вообще остается только думать, что же там не тормозит
- Адаптивность. Медиа-запросы — это всегда гораздо проще, чем считать ширину/высоту внутри ролика скриптами. Резиновый DIV, в отличие от резинового элемента canvas не ест ресурсов вообще
- Анимация любого элемента на странице. Можно легко «раскрасить» существующую верстку буквально за несколько минут
- Отсутствие (или изменение) понятия ключевых кадров. Элемент верстается, например, в том месте и с теми свойствами, с которыми он должен быть в конце анимации и с помощью директивы from ему задаются свойства, из которых он анимируется в текущее состояние. Либо с помощью директивы to ему указывается конечное состояние
- Относительная простота. Не нужно дополнительное ПО, код очень простой и компактный
Плюсы Animate CC
Применимо к баннерам, для анимации элементов на странице эти проблемы малозначительные.
- Таймлайн и слои. В многослойном баннере в голом HTML приходится постоянно сделить за z-index, когда в Animate можно просто поменять порядок слоев как заблагорассудится. Одновременная анимация нескольких слоев также визуально не представлена. Изменение порядка кадров в Animate CC также наглядно проще
- Вложенные мувиклипы со своей анимацией. Пока не разбирался, как это делается в GSAP, но, понимаю, что придется писать другую отдельную функцию для другого таймлайна
Что в итоге
Имеем классическую палку о двух концах: можно использовать любой редактор, но нужно следить за расположением слоев и пересчитывать z-index в голове. Выигрыш в производительности и простоте реализации может пересилить отсутствие визуальных инструментов редактирования таймлайна. Кому-то может наоборот больше понравиться исключительно скриптовая анимация. Время разработки баннера на GSAP прямо пропорционально количеству элементов внутри контейнера. Легкость анимации элементов на уже готовой странице — однозначно плюс данной библиотеки, и для сайтов я ее обязательно буду применять в будущем, но для баннеров пока что время разработки критично, тут надо смотреть в каждом конкретном случае, что будет удобнее.
