Pull to refresh

Анимация на HTML5 с помощью GreenSock Animation Platform

Web design *Computer Animation *
На днях я попробовал перерисовать баннер, который я раньше делал в 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. FPS. В документе 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 прямо пропорционально количеству элементов внутри контейнера. Легкость анимации элементов на уже готовой странице — однозначно плюс данной библиотеки, и для сайтов я ее обязательно буду применять в будущем, но для баннеров пока что время разработки критично, тут надо смотреть в каждом конкретном случае, что будет удобнее.
Tags:
Hubs:
Total votes 11: ↑9 and ↓2 +7
Views 16K
Comments Comments 6