Flow Motion — переходы между страницами

Источник: ds-docs/component-contracts/foundations/flow-motion.md

Источник: раздел Figma «Flow Motion» 40019137:28497 оригинала Astra DS. Прочитано REST 07.09.2026, состав снят по видимым слоям: скрытый ряд в карточке перехода значит «поле не участвует».

Пять переходов страницы и десять токенов уровня motion-page-*. Значения примитивов, на которые они ссылаются, — в motion. Развёрнутый разбор с паттернами мобильного банка лежит в прежней базе: ../reference/guidelines/flow-motion.md.

Зачем это отдельно от анимации компонента. Приложение работает на двух платформах разом: Flutter как хозяин и React-модули внутри него. Пользователь границы не видит, поэтому переход между страницами описан один раз и одинаково для обеих: «используй Slide Left» значит одно и то же для дизайнера, Flutter- и React-разработчика.

Токены страницы


`motion-page-duration-instant`	`duration-3xs`	60 мс
`motion-page-duration`	`duration-xxl`	300 мс
`motion-page-enter-easing`	`easing-decelerate`	`ease-out` — входящая страница тормозит на подлёте
`motion-page-exit-easing`	`easing-accelerate`	`ease-in` — уходящая разгоняется на выходе
`motion-page-enter-scale-from`	`scale-s`	0.8
`motion-page-enter-scale-to`	`scale-default`	1
`motion-page-enter-opacity-from`	`distance-viewport-right`	⚠ прозрачность через дистанцию — см. находки
`motion-page-enter-opacity-to`	`distance-viewport-left`	⚠ то же
`motion-page-enter-x-left`	`distance-viewport-bottom`	⚠ горизонталь через вертикальную дистанцию
`motion-page-enter-x-right`	`distance-viewport-top`	⚠ то же

Ещё три токена встречаются в карточках переходов, но в сводной таблице их нет вовсе: motion-page-enter-y (въезд по вертикали), motion-page-exit-push (выталкивание старой страницы), motion-overlay-scrim (затемнение под шторкой).

Библиотека переходов


`motion-page-instant`	«Переход без анимации, мгновенная смена страниц»	— (ряд скрыт)	⚠ в ряду `Ease` стоит `motion-page-duration-instant`	—
`motion-page-slide-right`	«Въезд новой страницы слева направо»	`motion-page-duration`	`enter → exit`	вход `motion-page-enter-x-right`, выход `motion-page-exit-push`
`motion-page-slide-left`	«Въезд новой страницы справа налево»	`motion-page-duration`	`enter → exit`	вход `motion-page-enter-x-left`, выход `motion-page-exit-push`
`motion-page-slide-up`	«Въезд новой страницы снизу вверх»	`motion-page-duration`	`enter → exit`	вход `motion-page-enter-y`, подложка `motion-overlay-scrim`
`motion-page-slide-down`	«Въезд новой страницы сверху вниз»	`motion-page-duration`	`enter → exit`	ряды те же, что у `slide-up`
`motion-page-scale`	«Масштабирование новой страницы от меньшего размера до полного экрана»	`motion-page-duration`	`enter → exit`	масштаб `from → to`, прозрачность `from → to`
`motion-page-fade-in`	«Постепенное появление новой страницы»	`motion-page-duration-instant` (60 мс)	`motion-page-enter-easing`	прозрачность `from → to`

Находки

Ни одного токена motion-page-* в файле переменных нет. Есть только примитивы, на которые они ссылаются: duration-*, easing-*, scale-*, distance-viewport-*. Переход существует как договорённость документации; в коде он разворачивается в примитивы руками. То же самое у композитных токенов компонентов — см. motion.
Колонка примитивов в таблице сдвинута. Прозрачности сопоставлены дистанции (distance-viewport-right и -left), горизонтальному смещению — вертикальные (-bottom, -top), а раздела «смещение по Y» в таблице нет вовсе, хотя motion-page-enter-y в переходах используется. Пользоваться этими четырьмя строками нельзя: разделы длительности, кривых и масштаба согласованы, эти — нет.
У мгновенного перехода единственный видимый ряд — Ease, и в нём токен длительности. Ряд Duration скрыт. То есть «мгновенно» нигде не сказано числом: ближайшее по смыслу — duration-3xs (60 мс), и это не ноль.
Затухание быстрее обычного перехода в пять раз: у fade-in длительность motion-page-duration-instant (60 мс) против 300 мс у остальных. Похоже на недосмотр: для «постепенного появления» 60 мс — почти мгновенно.
slide-up и slide-down совпадают ряд в ряд. Отдельного токена на направление вниз нет: у обоих вход motion-page-enter-y, и что различает подъём и спуск — из раздела не видно. У пары право/лево такое различие есть (-x-right против -x-left).
Ряды Move Y подписаны «Move X». В карточках slide-up и slide-down подпись ряда переопределена вручную, и вертикальное движение читается как горизонтальное.
Задержка задана числом. Во всех семи карточках ряд Delay скрыт и хранит 200ms строкой, не токеном, — при том что duration-* годятся и для задержки.
Ссылки на реализацию пустые: и React, и Flutter помечены «скоро», хотя в разделе Motion Tokens ссылка для React уже есть.

Что из этого попадает в контракт

Пока ничего. Контракт описывает устройство компонента, а переход — свойство перехода между экранами: у него нет узла, к которому его привязать. Раздел interaction записывает, что компонент отвечает на нажатие и даёт виброотклик, но ни длительности, ни кривой в нём нет. Если понадобится — вводить полем interaction.motion со ссылкой на имя перехода, а не числами.

См. также: motion, haptic, README.