Веб-анимация: прошлое, настоящее и будущее

API веб-анимации увеличивает масштабы
API для веб-анимации создан, чтобы объединить в одном инструменте CSS анимации, переходы и SMIL. Javascript-разработчики используют его, чтобы улучшать DOM анимации и библиотеки. Браузеры подключаются к API для создания более сложных инструментов разработки. Именно благодаря поддержке команд Firefox и Chrome, API для веб-анимации удалось добиться признания в среде разработчиков.
SMIL увядает, SVG растет
Ирония судьбы: как только Edge решили поддерживать API веб-анимации, Chrome объявили об отправке на пенсию SMIL. Теперь SVG — синоним веб-анимации. Из-за особенностей SVG анимацию надежнее и проще делать с помощью сторонних Javascript-библиотек — SnapSVG или GreenSock GSAP.
К счастью, некоторые баги анимации SVG при помощи CSS исправлены. Теперь независимые библиотеки SVG анимации станут более доступными.
Инструменты прототипирования еще не дотягивают
Самой большой проблемой веб-анимации был инструментарий. Можно годами изучать CSS и Javascript, но анимация на них будет смотреться примитивно — если сравнить с тем, чему научился дизайнер за месяц работы в Adobe After Effects. Либо фронтэнд-разработчикам придется стать иллюстраторами, либо дизайнерам — кодерами.
Для решения проблемы есть много инструментов со своими плюсами и минусами. Где-то рабочее пространство для анимации устроено хорошо, а для разработки — не очень. И наоборот. Есть куда развиваться. Явных лидеров нет, но проигравшие уже видны.
Инструменты браузеров улучшаются
API для веб-анимации распространен благодаря Chrome Canary и Firefox Developer Edition, помогающим запустить собственные инструменты для анимации. Может быть, по мере становления API мы наконец увидим сторонние инструменты для CSS и редактирования SVG анимаций.
Развитие моушн-гайдлайнов
Вслед за принципами material design от Google IBM и Salesforce представили собственные дизайн-системы с моушн-гайдлайнами. Крупные компании все чаще вкладываются в систематизацию пользовательских интерфейсов.
Как обыгрывается документация — зависит от аудитории. Убедительные и красивые гайдлайны преобладают там, где вербуют дизайнеров. Когда дело касается кодеров, документация становится более строгой.
UX и доступность
В 2015 мы узнали многое о вестибулярных расстройствах, что оказалось новинкой для сообщества веб-разработчиков. Если вы не хотите отказываться от анимации, придется дать пользователям выбор. На этой волне UX и вопросы доступности будут изучаться еще глубже.
Суть анимации
С момента, когда анимация вернулась в веб-разработку, ее использовали, чтобы рассказывать истории и развлекать, ускорять восприятие взаимодействий с сайтом, улучшать пользовательский опыт. И это только начало. Новые инструменты и библиотеки для улучшения сайтов появляются ежедневно.
Анимацией будут злоупотреблять. Каждый следующий параллакс лучше предыдущего, и клиенты хотят видеть их у себя на сайтах. Надеюсь, мы уже сделали какие-то выводы. Дизайн — это больше, чем погоня за трендами. Дизайн — это слушать пользователя.
Вывод: Уже пять минут загружается сайт с кучей крутых (несомненно) анимационных эффектов и вжиу-вжиу? Трепещите, всё еще впереди.