Принципы Apple Fluid Design в вебе: разбираем гайд Эмиля Ковальски

Принято считать, что плавность интерфейсов Apple — это недостижимая магия закрытой экосистемы. Разработчики в вебе обычно просто вешают transition: all 0.3s ease и надеются на лучший исход. Эмиль Ковальски составил гайд по переносу принципов WWDC на веб-платформу, и там нет никакой магии. Только математика, расчет физики и полный отказ от привычных веб-паттернов.

Главная проблема веба в том, что стандартные CSS-анимации и @keyframes не умеют адекватно прерываться. Если пользователь передумал и потянул закрывающееся окно обратно, интерфейс неизбежно спотыкается. Подход Apple требует, чтобы жест и реакция системы происходили параллельно. Это значит, что придется отказаться от нативных CSS-переходов в пользу JS-библиотек вроде Motion. Анимация всегда должна начинаться с текущего значения пикселей на экране, а не с логического состояния, иначе обеспечен визуальный скачок.

Правда, перенос этих механик требует жесткого микроменеджмента каждого взаимодействия. Мало просто добавить пружинную анимацию на элемент. Нужно перехватывать скорость движения пальца в момент отпускания экрана и передавать ее как начальную скорость пружины, так называемый velocity handoff. Автор сводит физику к двум параметрам: damping для контроля затухания и response для скорости отклика. Базовый совет — использовать damping: 1.0 везде, где нет прямого физического импульса от пользователя. Вопрос лишь в том, сколько продуктовых команд готовы тратить ресурсы на вычисление относительной скорости каждого свайпа ради идеальной иллюзии физического мира.