December 27th, 2014

усы2

Программируем мультики

Я тут шутил в твиттере, но на самом деле и не шутил:

How’s “Director of Animation in UI” for a job title?

Разговор вот о чем. Если вы видели Мак и помните первые впечатления от Мак ОС, особенно после Виндоуса или Линукса, скорее всего вас впечатлило огромное количество анимаций. Табы не просто сменяют друг друга, они перетекают. Окошки сворачиваются в док по довольно сложной кривой. Иконки в доке прыгают, а при удалении испаряются в облачке дыма.

Это вовсе не блажь, анимации критически важны. При всей их субтильности и скоротечности они помогают понимать, что происходит. Основные вопросы любого интерфейса — где я нахожусь, как я сюда попал, что есть вокруг — на них сложно ответить в цифровом мире, когда одно окно мгновенно сменяется другим, совершенно на него не похожим. Теряется причинность, связь. Анимации — изящное средство, не отнимающее пространство, задействующее встроенные в человека механизмы восприятия, понятное интуитивно и приближающее светящиеся точки экрана к объектам физического мира.

Анимации точно не даются даром: в том же Маке анимации вылизаны только в флагманских приложениях и в общесистемных штуках типа NSTabView. Сложность тут, скорее всего, чисто техническая.

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

W3C, как всегда, прилагает все усилия, чтобы никому качественно легче жить не стало. CSS-анимации — нововведение уровня border-radius — совсем простые случаи, иногда, как-то, но хоть закрывает. Хорошо что есть, но хотелось бы чего-то посерьезней. Можно упороться и добиться неплохих результатов:

но посмотрите на код. Это совершенно неизменяемо и неподдерживаемо.

Всегда есть JavaScript, конечно, но сам по себе он проблему не решает. Судя по тому, что у Гугла веб-версия Inbox значительно хуже анимирована, чем мобильная, вопрос даже не в количестве усилий.

Не хватает подходящего инструмента, модели. Причем есть ощущение, что чтобы запустить прогресс, придется много чего существующего разломать. HTML, CSS и DOM, например, умеренно удобны для верстки текста, но не выглядят удобным средством разметки UI. Вся история развития веба, начиная с момента, когда в нем захотели делать что-то похожее на приложения, на интерфейс, и до современности, включая flexbox — это страдания по поводу вот этой вот шизофрении, попытки засунуть квадратный кубик в круглое отверстие. Ну нету в CSS инструмента, чтобы поставить логотип в верхний левый угол. Обтекание картинки текстом — есть, а левого верхнего угла нет, и не планируется. Представьте, сколько раз прозвучит слово f**k, если вы начнете верстать что-то подобное на div-ах.

Лучшее, что я пока видел, это Grid Style Sheets, портированный в веб Cocoa Auto Layout. В принципе, он как-то работает, но в большие проекты его брать страшно: новостей давно нет, как падает производительность с ростом числа ограничений (тысячи, десятки тысяч), непонятно. Хочется чего-то подобного нативно в браузер. И это мы только про статику говорим.

Проблема еще в том, что мы хотим слишком многого. С одной стороны, анимировать в коде это примерно как рисовать векторную графику сразу в тегах SVG. Хочется нормальный монтажный стол, таймлайн, кейфреймы, кривые переходов, главное — мгновенной визуальной обратной связи и непосредственного управления.

Но одновременно мы хотим и адаптивности — в отличие от кино/мультфильма, анимация приложений должна быть интерактивной и работать на неизвестном в момент производства содержании. Вот тут, например, понятно как это будет выглядеть на четырех квадратах, и можно даже представить себе, как будет выглядеть инструмент, который позволит подобное нарисовать. Но в приложении у конкретного пользователя квадратов может оказаться и 1, и 10.

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

Пусть все анимации по делу, и даже уже все смонтированы, спланированы и разжеваны, но перенести на живой сайт их не смогли. Пусть даже анимации были не первым приоритетом, чувствуется напряжение, когда речь заходит о реализации. Так быть не должно: сложным должен быть дизайн, прорабатывание, придумывание, вылизывание, в общем, креативный процесс. А реализация должна быть простой и прямолинейной. Как вы догадываетесь, до этого пока далеко.