На днях я попробовал перерисовать баннер, который я раньше делал в 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 прямо пропорционально количеству элементов внутри контейнера. Легкость анимации элементов на уже готовой странице — однозначно плюс данной библиотеки, и для сайтов я ее обязательно буду применять в будущем, но для баннеров пока что время разработки критично, тут надо смотреть в каждом конкретном случае, что будет удобнее.
Комментарии (6)
Turic
26.10.2016 18:52Визуальный редактор — это основная проблема в работе с html5. Согласен с вами, проблем хватает у обоих подходов и идеального даже близко нету. Пока надстройка createjs помогает решать большую часть проблем, особенно когда требуется не просто накодить баннер, но и сделать его в разных размерах и довольно быстро. Какие-то же другие вещи, вроде видео-баннеров, проще делать чистым кодом — действительно быстрее и удобнее. И если не использовать лишние библиотеки, то даже размер получается небольшой.
Хотя стоит откровенно признать, что сейчас разработка html5-баннеров — это чистейший гемморой, где нету единого стандарта и удобства, который давал флеш, и пройдет еще много времени, когда смогут приблизиться к тому уровню удобства, что было раньше. Либо другой вариант — самописный софт.sashabeep
26.10.2016 18:54Подумываю написать что-то для быстрого накидывания слоёв, просто, без таймлайна и т.д. Как сейчас модно. SPA на React :)
Turic
26.10.2016 19:55Как по мне — отличная идея. Я делал программу для упаковки в zip баннеров и прописывания в них верных ссылок для разных сетей, потому что шаблонов в CC долгое время не было, а руками упаковывать каждый баннер — это лишняя трата времени, да и и как привычно было, что раньше все в одном swf-файле лежало. А сейчас нету, спасибо html5.
Аналогично с редактором — у адоба чересчур большой перекос в сторону сохранения старой логики работы, а у гугла веб-дизайнер убогий и с огромным весом либ. И что-то самописное выглядит очень хорошим вариантом.sashabeep
27.10.2016 09:42У меня тоже такой скриптец крутится — из manifest выдергивает картинки, засовывает их в base64, ссылку вклеивает
markilfin
Не совсем понятно, что вы имели в виду про z-index.
sashabeep
В баннерах внутри баннера все элементы располагаются в слоях(как в том же фотошопе) и в них же анимируются, одни элементы перекрывают другие при анимации и так далее. Обычно я начинаю с самого нижнего уровня — фона и каждый новый элемент добавляется слоем выше. В animate изменять порядок слоев — очень просто, просто перетащить слой выше или ниже предыдущего, если верстать вручную — то порядок слоев надо держать в голове.
Например, когда есть кусок текста и картинка, они появляются последовательно, один за другим, но надо так, чтобы картинка была на уровень ниже текста, чтобы не загораживала текст после появления — я анимирую их последовательно, а потом переношу картинку на уровеь ниже. Здесь надо будет держать это в голове