Паттерны переходов между страницами (Flow Motion)
Анимация переходов между страницами — это визуальные эффекты, которые воспроизводятся в момент навигации пользователя от одной страницы (или экрана) к другой в веб-приложении или мобильном интерфейсе.
Вместо мгновенной смены контента анимация делает этот процесс плавным и воспринимаемым: старый экран «уходит», новый — «появляется» с помощью движения, затухания, масштабирования или других трансформаций.
Зачем нам общие паттерны анимации
Наше приложение работает на двух платформах одновременно: Flutter как хост и React-модули внутри него. Пользователь не знает где заканчивается одна технология и начинается другая — он видит один продукт. Если переходы между страницами будут отличаться по скорости, направлению или ощущению, это разрушает целостность опыта. Общие паттерны анимации решают три задачи:
-
Консистентность — одинаковое поведение на Flutter и React создаёт ощущение единого продукта.
-
Синхронизация команд — дизайнеры, Flutter- и React-разработчики говорят на одном языке: «используй Slide Left» означает одно и то же для всех.
-
Скорость решений — не нужно придумывать анимацию для каждого экрана заново. Паттерн уже описан, токены уже заданы.
Базовая библиотека переходов в Astra DS — Flow Motion
Тут собраны базовые анимации переходов с примерами:
embed.figma.com
Библиотека переходов
Instant
Переход без анимации, мгновенная смена страниц.
Fade In
Постепенное появление новой страницы.
Slide Up / Down
Slide Right / Left
Scale
Масштабирование новой страницы от меньшего размера до полного экрана.
Паттерны переходов для мобильного банка
Паттерны описывают когда и какой тип перехода использовать в конкретном сценарии. В отличие от библиотеки переходов, которая описывает механику движения, паттерны фиксируют намерение — почему именно этот переход здесь уместен.
Наше приложение работает на двух платформах: Flutter как хост-приложение и React-модули внутри него. Паттерны одинаковы для обеих платформ — дизайнер описывает переход один раз, Flutter- и React-разработчики реализуют его независимо, но результат выглядит идентично для пользователя.
Паттерны зафиксированы между командами и являются обязательными для всех новых экранов.
Переход между модулями
Использовать когда пользователь переходит с нативной Flutter-страницы на страницу с React-модулем или обратно. Технически это два разных рендерера, но для пользователя это должен быть единый непрерывный флоу.
Важно: анимацию в этом случае полностью контролирует Flutter — он является хост-приложением и управляет навигацией между страницами. React-модуль внутри не воспроизводит собственный переход, он просто появляется уже на месте после завершения Flutter-анимации.
Переход на React-модуль: Slide Left — въезд новой страницы справа налево. Возврат с React-модуля: Slide Right — въезд предыдущей страницы слева направо.