Flow Motion — переходы между страницами
Источник:
ds-docs/reference/guidelines/flow-motion.md
Библиотека переходов и токены уровня страницы (motion-page-*). Значения примитивов
(duration / easing / scale / opacity / distance) — в motion; процессы передачи анимации
между дизайном и кодом — в animation-tokens. Связано: README.
Что это
«Анимация переходов между страницами — это визуальные эффекты, которые воспроизводятся в момент навигации пользователя от одной страницы (или экрана) к другой. Вместо мгновенной смены контента анимация делает этот процесс плавным и воспринимаемым: старый экран „уходит“, новый — „появляется“ с помощью движения, затухания, масштабирования или других трансформаций.»
Зачем общие паттерны на двух платформах
«Наше приложение работает на двух платформах одновременно: Flutter как хост и React-модули внутри него. Пользователь не знает, где заканчивается одна технология и начинается другая — он видит один продукт. Если переходы между страницами будут отличаться по скорости, направлению или ощущению, это разрушает целостность опыта.»
| Консистентность | «Одинаковое поведение на Flutter и React создаёт ощущение единого продукта» |
| Синхронизация команд | «Дизайнеры, Flutter- и React-разработчики говорят на одном языке: „используй Slide Left“ означает одно и то же для всех» |
| Скорость решений | «Не нужно придумывать анимацию для каждого экрана заново. Паттерн уже описан, токены уже заданы» |
1. Токены страницы (motion-page-*)
Композитные токены переходов ссылаются на примитивы из motion.
Длительность
motion-page-duration-instant | duration-3xs | 60 ms |
motion-page-duration | duration-xxl | 300 ms |
Кривые анимации
motion-page-enter-easing | easing-decelerate | ease-out |
motion-page-exit-easing | easing-accelerate | ease-in |
Логика: входящий экран замедляется на подлёте (decelerate), уходящий —
ускоряется на выходе (accelerate).
Масштаб
motion-page-enter-scale-from | scale-s | 0.8 |
motion-page-enter-scale-to | scale-default | 1 |
Прозрачность и смещение — ⚠️ таблица в Figma рассогласована
Так значения выглядят в Figma сейчас (снято по видимым слоям, 2026-07-30):
| Прозрачность | motion-page-enter-opacity-from | distance-viewport-right ⚠️ |
| Прозрачность | motion-page-enter-opacity-to | distance-viewport-left ⚠️ |
| Смещение по оси X | motion-page-enter-x-left | distance-viewport-bottom ⚠️ |
| Смещение по оси X | motion-page-enter-x-right | distance-viewport-top ⚠️ |
Это ошибка документации, а не спецификация: токены прозрачности сопоставлены с токенами
дистанции, а токены смещения по X — с вертикальными дистанциями. Похоже, колонка primitive
сдвинута на один раздел вниз: значения X (right/left) попали в строку прозрачности, значения
Y (bottom/top) — в строку X, а раздел «Смещение по оси Y» в таблице отсутствует вовсе —
при том что токен motion-page-enter-y используется в переходах Slide Up/Down.
Логически ожидаемое сопоставление (требует подтверждения владельца, см. Q-001):
motion-page-enter-opacity-from | opacity-hidden (0) |
motion-page-enter-opacity-to | opacity-visible (1) |
motion-page-enter-x-left | distance-viewport-left (−100vw) |
motion-page-enter-x-right | distance-viewport-right (100vw) |
motion-page-enter-y | distance-viewport-bottom / -top |
До подтверждения не полагайтесь на таблицы прозрачности и X-смещения из Figma. Разделы длительности, кривых и масштаба согласованы и пригодны для реализации.
2. Библиотека переходов
Пять переходов, каждый — со своим композитным токеном.
Instant — motion-page-instant
«Переход без анимации, мгновенная смена страниц.»
| Поле | Значение |
|---|---|
| Ease | motion-page-duration-instant ⚠️ (в поле Ease указан токен длительности, см. Q-002) |
Slide Right — motion-page-slide-right
«Въезд новой страницы слева направо.»
| Duration | motion-page-duration (300 ms) |
| Ease | motion-page-enter-easing → motion-page-exit-easing |
| Move X (вход) | motion-page-enter-x-right |
| Move X (выход) | motion-page-exit-push |
Slide Left — motion-page-slide-left
«Въезд новой страницы справа налево.»
| Duration | motion-page-duration (300 ms) |
| Ease | motion-page-enter-easing → motion-page-exit-easing |
| Move X (вход) | motion-page-enter-x-left |
| Move X (выход) | motion-page-exit-push |
Slide Up — motion-page-slide-up
«Въезд новой страницы снизу вверх.»
| Duration | motion-page-duration (300 ms) |
| Ease | motion-page-enter-easing → motion-page-exit-easing |
| Move Y (вход) | motion-page-enter-y — в Figma подписано «Move X» ⚠️ (Q-003) |
| Подложка | motion-overlay-scrim — в Figma подписано «Move X» ⚠️ (Q-003) |
Slide Down — motion-page-slide-down
«Въезд новой страницы сверху вниз.» Состав идентичен Slide Up.
Scale — motion-page-scale
| Duration | motion-page-duration (300 ms) |
| Ease | motion-page-enter-easing → motion-page-exit-easing |
| Scale | motion-page-enter-scale-from → motion-page-enter-scale-to (0.8 → 1) |
| Opacity | motion-page-enter-opacity-from → motion-page-enter-opacity-to |
Fade In — motion-page-fade-in
«Постепенное появление новой страницы.»
| Duration | motion-page-duration-instant (60 ms) |
| Ease | motion-page-enter-easing |
| Opacity | motion-page-enter-opacity-from → motion-page-enter-opacity-to |
3. Паттерны для мобильного банка
Паттерны фиксируют намерение (когда и почему переход уместен), в отличие от библиотеки, которая описывает механику движения. Одинаковы для обеих платформ, обязательны для всех новых экранов (D-003).
Переход между модулями
Когда пользователь переходит с нативной Flutter-страницы на React-модуль или обратно — технически это два рендерера, но для пользователя единый непрерывный флоу.
- Анимацию полностью контролирует Flutter (хост управляет навигацией). React-модуль собственный переход не воспроизводит — появляется уже на месте после Flutter-анимации.
- На React-модуль:
Slide Left(новая страница справа налево). - Возврат с React-модуля:
Slide Right(предыдущая слева направо).
4. Реализация на платформах
«Инструкции, как работать с токенами анимации в рамках ваших платформ, доступны по ссылке.»
| React | «скоро» |
| Flutter | «скоро» |
В Flow Motion обе платформы помечены «скоро», хотя в разделе Motion Tokens ссылка для React уже есть — Confluence 471531531 (см. animation-tokens). Вероятно, раздел не обновили (Q-004).
Открытые вопросы
| Q-001 | Колонка primitive в таблицах «Прозрачность» и «Смещение по оси X» рассогласована (opacity → distance-viewport-*, X → вертикальные дистанции); раздел «Смещение по оси Y» отсутствует, хотя motion-page-enter-y используется | Выровнять колонку значений и добавить раздел Y | Владелец DS |
| Q-002 | У motion-page-instant в поле Ease указан токен длительности motion-page-duration-instant | Перенести в поле Duration; Ease задать или убрать | Владелец DS |
| Q-003 | В Slide Up/Down поля подписаны «Move X», хотя содержат motion-page-enter-y и motion-overlay-scrim | Переименовать поля в «Move Y» и «Scrim» | Владелец DS |
| Q-004 | В Flow Motion обе платформы помечены «скоро», хотя React-инструкция существует | Синхронизировать ссылки с разделом Motion Tokens | Владелец DS |
| Q-005 | Токены motion-page-*, motion-page-exit-push, motion-overlay-scrim отсутствуют во всех DTCG-экспортах (проверено 2026-07-30) | Экспортировать либо зафиксировать, что они разворачиваются в примитивы на стороне реализации | Владелец токенов |
| Q-006 | Не описано поведение переходов при prefers-reduced-motion | Определить деградацию (вероятно Instant) | Владелец DS |
Источник
- Figma Section «Flow Motion»
40019137:28497:Библиотека переходов40019137:28498→ Instant40019137:28499, Slide (Right/Left)40019137:28528, Slide (Up/Down)40019137:28579, Scale40019137:28610, Fade In40019137:28640;Motion primitive tokens40019137:28680— токеныmotion-page-*и их примитивы.
- Прочитано Figma REST API 2026-07-30; состав переходов и сопоставление токенов сняты по видимым слоям doc-компонентов (скрытые слои-варианты исключены).
- Значения примитивов — motion; процессы дизайнер ↔ разработчик — animation-tokens.
- Паттерн перехода между модулями подтверждён решением D-003.