Кинематика
интерфейса
Статичные экраны мертвы. В системе Формли движение подчиняется строгим законам физики, создавая ощущение материальности цифровых объектов.
Мы не используем случайные анимации. Каждое микро-взаимодействие, переход между состояниями и реакция интерфейса на пользователя рассчитаны математически.
Физика движения:
Кривые Безье
В основе анимации Формли лежит кастомная кривая Безье, имитирующая физическое сопротивление. Мы отказались от стандартного ease-in-out в пользу более резкого старта и плавного, «тягучего» завершения.
Это создает эффект инерции: элементы интерфейса кажутся тяжелыми и существенными, а не невесомыми и дешевыми.
Временные метрики
150ms — Реакция
Время отклика для мгновенных действий: ховеры кнопок, переключение табов, индикаторы фокуса. Должно ощущаться мгновенно.
300ms — Переход
Стандартная длительность для модальных окон, выпадающих списков и раскрытия аккордеонов. Пользователь успевает осознать смену состояния.
600ms — Навигация
Используется для переходов между тяжелыми страницами или сложными рендерингами графиков. Позволяет глазу скользить по изменениям.
Паттерны взаимодействия
Микровзаимодействия
Трансформация состояния кнопки при нажатии не должна быть линейной. Мы используем scale(0.98) для имитации физического нажатия.
transition: transform 0.1s var(--fly-ease-elastic);
Загрузка данных
Спиннеры — зло. В Формли мы используем скелетоны (Skeleton Screens) с градиентным мерцанием, чтобы сохранить структуру контента.
Производительность
Используйте только свойства transform и opacity для анимаций. Избегайте изменения width, height или margin в реальном времени, чтобы не вызывать перерисовку макета.