Обучайся бесплатно с WAYUP Premiere сегодня вечером

Возможно, вы заметили, что анимация довольно популярна в Интернете, особенно в последние несколько лет. Нет недостатка в учебниках, тематических исследованиях и библиотеках, ориентированных на любителей создавать динамику на экранах мониторов. Это именно тот самый, один из аспектов развития цифровых технологий, который может интриговать,  восхищать, мотивировать и впечатлять пользователей и создателей. Практически на каждом сайте мы видим анимацию отдельных элементов или весь дизайн, выполненный с помощью эффектов того же параллакса. И речь, разумеется, не идет об использовании обычного фонового видео, но об анимации элементов, иконок, отдельных сцен, композиций, логотипов.

В этом материале мы выбрали несколько библиотек JavaScript для анимации и проанализировали их возможности для удобства работы, как с точки зрения бизнеса, так и с точки зрения развития. Вместо того чтобы задаться вопросом: «Что лучше для создания X?», мы  посмотрим на такие вопросы:

  • Насколько хорошо поддерживается этот проект?
  • Легко ли веб-разработчику работать?
  • Каков синтаксис?

Уделим внимание и дополнительным аспектам, которые помогают обеспечить решение задач проекта и бизнеса, таких как: выделенные затраты (соотношение возможностей/изучения/итоговый результат), открытый исходный код, наличие дополнений и расширений, в каком состоянии находится сообщество. Такие детали обычно помогают бизнесу или команде найти то программное решение, которое наиболее эффективно удовлетворит их потребности в разработке некоторого проекта.

Что ты такое библиотека анимации?

Библиотека анимации - набор инструментов, который позволяет создавать разработчикам динамические изображения. Также это и библиотеки инструментов для управления движением объектов и общей направленностью. Могут быть включены и возможности для работы с интерактивной анимацией, то есть той, что реагирует на действия пользователя (подвел ли он курсор к элементу, прокрутил ли страницу/объект и так далее).

Разумеется, что наша подборка может некоторым показаться очень субъективной, но важно то, что именно устраивает вас. Если библиотека подходит для ваших целей, вашего бизнеса и проекта, то это и главное.

GreenSock

GreenSock (GSAP) – одна из ведущих библиотек JavaScript для веб-аниматоров. Вы можете создавать всевозможные потрясающие эффекты, включая даже те, которые требуют поддержки SVG.

Основные аспекты GreenSock - открытый исходный код, возможность использовать библиотеки TweenMax, TimelineLite, TimelineMax  и TweenLite и, тем самым,  обеспечить создание самых разных по сложности анимаций без привлечения отдельных инвестиций. Кроме того, если готовый файл анимации имеет очень большой размер, то рекомендуем ознакомиться с этим материалом на сайте библиотеки.

У GSAP есть и много разных расширений и плагинов. Например (с ссылками на примеры):

DrawSVG  - прогрессивно скрывать/проявлять штрихи SVG

MorphSVG  - трансформирование любой формы SVG в любую другую форму (подведите к кнопке курсор, и она изменит форму)

ScrollTo  - анимация прокрутки. Работает с ScrollMagic

Bezier  - анимирование кривой Безье.

Вот полный список всех расширений GreenSock для дальнейшего изучения. Несколько примеров интерактивной анимации: пример 1 (шарик за курсором бегает), пример 2 (смело кликайте по цветным квадратикам), пример 3 (панорамное изображение двигается за курсором).

Что касается популярности, то GSAP используется более чем на 4 млн. сайтов и существует библиотека очень долгое время. Что это значит? Большая документация, большое сообщество, множество учебников и легкость в освоении.

В целом сообщество GreenSock довольно активно присутствует на таких площадках, как  Slack, Animation At Work , Stack Overflow , форум участников GSAP и Twitter. Документация хорошо написана, а синтаксис легко усваивается и достаточно понятен и выразителен. Некоторые части GSAP, как упоминалось, являются open source, в то время как плагины и утилиты могут и иметь некоторую стоимость, но не все.

Для каких целей подойдет?

Если требуется одна мощная библиотека для разных целей и видов анимации, с надежной поддержкой сообщества, понятной документацией, простым синтаксисом, и актуальная на текущий момент по функционалу в целом.

Anime.js

Еще одна библиотека с открытым исходным кодом, невероятно легкая и миниатюрная. Работает Anime.js с CSS-свойствами, любыми атрибутами DOM и объектами JavaScript, SVG, также и со свойством transform. Из некоторых замечательных функций выделим работу с кадрами, цепочкой кадров, временной шкалой, наличие элементов управления для управления воспроизведением.

Синтаксис же окажется знакомым многим веб-разработчиком, поскольку используется во многих анимационных библиотеках на сегодняшний день. С временной шкалой также легко работать, а свойства регулируются с помощью объектно-литерального подхода.

На текущий момент Anime активно развивается на GitHub, и это хорошо. При необходимости поддержки от сообщества будет лучшим сначала отследить проблемы проекта на GitHub, прежде чем перейти в Stack Overflow для получения быстрой поддержки. В некоторых случаях ссылки все равно будут указывать на GitHub.

Одним из самых красивых и наглядных примеров возможностей библиотеки является интерактивная анимация элементов, что меняют свой вид в зависимости от действий пользователя.

Когда дело доходит до документации, будьте готовыми долго её изучать. Документация Anime.js  возможно некоторым покажется сложной, поскольку ей не хватает частных объяснений для пояснений демоверсий. Но в тоже время управление событиями не имеет такого высокого уровня сложности, который обычно можно видеть в других библиотеках.

Поскольку библиотека относительно нова, то обратим внимание на поддержку браузерами.  Она очень хороша с IE10-11, а Edge – как эталонный тест. Однако ничего не говорится о поддержке iOS или Android. Впрочем, существует стресс-тест, который также доступен и построен для демонстрации производительности.

Для каких целей подойдет Anime.js?

Если вам нужна библиотека, размером с небольшой файлик, с возможностью работы с простыми временными шкалами, с SVG (штрихи, трансформирование, преобразования и т. д.), на 100% с открытым исходным кодом и со знакомым синтаксисом.

Velocity

Если вы знакомы с jQuery, то Velocity придется вам по душе. Представляет он собой движок анимации с тем же API, что и метод jQuery $.animate (). Но при этом может работать как с jQuery, так и без него. Среди его возможностей - цветная анимация, трансформации, поддержка SVG и прокрутка (scrolling).

Если веб-разработчик решается использовать jQuery с Velocity, это не более чем просто вопрос замены $.animate () на $.velocity . Стоит отметить, что сейчас библиотека поддерживается практически всеми браузерами и мобильными направлениями, и это начиная еще с поддержки в IE8 и Android 2.3. Существуют также и множественные плагины и расширения для библиотеки.

Ниже пример работы библиотеки, благодаря которому можно увидеть и качество, и скорость, и легкость в исполнении.

В настоящее время проект все еще находится в активном развитии, согласно GitHub. Это библиотека, которая представлена на рынке довольно длительное время, широко используется и по нынешний день и хорошо известна многим. Вся суть Velocity направлена ​​на то, чтобы убедить разработчиков  с самого начала в том, насколько результативно она может выполнять задачи, благодаря предоставленным результатам тестирования. Есть много статей, в том числе видеоролики и учебники/книги, для тех, кто решит всерьез увлечься этом приложением.  Если вы пользователь ScrollMagic, вы с радостью узнаете, что он хорошо работает с Velocity. Поддержка SVG тоже великолепна.

Для каких целей подойдет Velocity?

Если требуется библиотека с простой и понятной документацией,  с дружественным синтаксисом, возможностью работы «с» или «без» jQuery, длинным послужным списком, богатыми ресурсами учебных материалов и достойной поддержкой сообщества.

Popmotion

Крохотная библиотека Popmotion, весом около 11,5КБ, позволяет разработчикам вспомнить суть Лего-блоков и поставляется с пакетами blend, draggable, pose, react и spinnable. Функциональная Popmotion позволяет создавать интерактивную анимацию с правильной физикой и отличной производительностью. Автор же полагает, что его творение гораздо лучше справляется с задачами, чем тот же GSAP. Однако документация к библиотеке может стать настоящим испытанием для некоторых в попытках разобраться и «расшифровать» её.

Общий синтаксис этой библиотеки, безусловно, сбивает с толку, а формулировки для документации сложны, требуя глубокого понимания проекта изнутри и снаружи. Поскольку вам, скорее всего, потребуется глубокое понимание того, как написана эта библиотека в целом, может потребоваться некоторое время, чтобы разобраться в ней, натренироваться в работе. Да, она никак не подойдет, если вы торопитесь.

Наглядный пример 1 красоты анимации, интересного подхода к идее и реализации радуги.

И второй пример анимационного меню, в котором скорость и легкие «подергивания» настолько незаметны, что не раздражают пользователя излишней анимационностью.

Создатель Popmotion надеется, что работа над Pose решит многие существующие основные проблемы библиотеки, предоставив декларативный API, который должен сделать анимацию супер простой. У Popmotion, безусловно, есть огромные возможности, когда речь заходит об интерактивной анимации, основанной на позиции мыши, и о чем-либо, что не основывается на продолжительности во времени, то есть не длительная анимация.

И вот как выглядит вариант Pose.

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

Найти поддержку можно в рабочей области Animation at Work Slack на  канале #popmotion, а также в системе GitHub.

Для каких целей подойдет Popmotion?

Если вы хотите, чтобы библиотека работала с акцентом на интерактивную анимацию, имела 100% -ный открытый исходный код и у вас имеется огромное желание сделать невероятно сложные разработки.

Mo.js

Проект Mo.js также с открытым исходным кодом, который можно установить с помощью NPM (менеджер пакетов для Node.js) или CDNJS.  Библиотека предлагает надежность, быстроту в работе, модульность, и простой API – все, чтобы помочь уменьшить большие размеры файлов.

В тоже время документация может для некоторых разработчиков оказаться немного запутанной. В ней не всегда содержатся объяснения методов, используемых в демонстрациях, поэтому вам придется искать ответы самостоятельно. Также может оказаться затруднительным понять, как использовать библиотеку для простой работы с движением (некоторые аспекты этого проекта не ясны с точки зрения того, как делать общие задачи анимации). Есть, конечно, некоторые действительно интересные эффекты, такие как этот вариант пузырей. Выглядит оригинально. Просто наведите курсор на пузыри и прокручивайте колесико мышки вперед или назад.

При рассмотрении его на GitHub, можно заметить малое количество участников и обновления были опубликованы достаточно давно. Самые последние изменения проекта варьируются между серединой 2016 года и серединой 2017 года, но с тех пор он не претерпевал значительных изменений.

По некоторым «слухам», беседам на форумах и из иных открытых источников  судьба проекта неясна, а создатель совершенно точно не слишком-то и планирует продолжать его развитие. Использовать ли сейчас такую библиотеку или нет – решение за вами, но если будете использовать, то она порадует хорошим функционалом, удобным интерфейсом, широкими возможностями и интеграцией.

Завершение

Несмотря на то как важно думать о долгосрочной перспективе своей работы над проектом, также важно и  узнавать мнение команды (если вы не работаете в «соло») перед принятием решения. Если вы «дружите» с минималистской библиотекой сегодня, потому что она технически способна сделать то, что вам нужно в данный конкретный момент, то вы уже совершенно точно не занимаетесь планированием того, что произойдет через шесть месяцев (минимум, быстрее мало что развивается), когда вам может потребоваться добавить в этот же самый проект что-то более амбициозное.

И тут вы понимаете, что ваше прошлое решение совершенно не подходит к реалиям веб-технологий. И приходится с нуля переписывать все, что уже есть и добавлять новое.

Если вы используете библиотеку с небольшим развитием или даже поддержкой, она может иметь и неприятные последствия в долгосрочной перспективе; особенно если вы столкнулись с ошибками браузера или поддержкой мобильных систем.  В то же время, продолжительное развитие около десятка лет  помогает компаниям чувствовать себя в безопасности, вкупе с  хорошей документацией, легко читаемым синтаксисом, с сильной поддержкой. И это приносит удовлетворение и компаниям-разработчикам, и создателям, и пользователям (так как они в состоянии видеть анимацию на всех устройствах и в любых браузерах).  

Но, так или иначе, окончательный выбор библиотеки для анимации остается непосредственно за разработчиком, и это с учетом того, что таких библиотек на сегодняшний момент огромное множество. Наверное, если все начать перечислять, что-то совершенно точно можно упустить. Мы рассказали о наиболее известных, необычных и полезных.

Как вам материал?