Руководство по анимации перехода страницы

Используйте анимационные эффекты переходов страниц для отображения первой страницы запущенного приложения или для перехода между страницами внутри приложения.

Примечание  Если нужно изменить только часть содержимого экрана, используйте анимации перехода содержимого, а не анимации перехода страниц.

Рекомендации

  • Разделите страницу на 2–5 областей вдоль естественных рамок или границ. Примените к областям смещенное расписание, чтобы они появлялись последовательно, а не одновременно, и сместите области на 100 пикселей для широкого макета приложения. Вы можете использовать меньшее смещение, если у вашего приложения есть специальный макет для узкого состояния. Распространенные схемы разделения страниц и последовательность их отображения см. в разделе Дополнительные рекомендации по использованию.
  • Все общее содержимое исходящей и входящей страниц должно оставаться на месте без применения анимации. Например, если кнопка Назад присутствует и на исходящей, и на входящей странице, ее не нужно включать в анимацию перехода.
  • Если на исходящей странице нет кнопки Назад (например, на первой странице приложения), а на входящей странице она есть, кнопка Назад должна быть указана как отдельная область, и эта область должна анимироваться для просмотра раньше всех остальных.
  • Если у ваших исходящих и входящих страниц разный фон, используйте анимацию появления для отображения нового фона. Запустите анимацию появления одновременно с анимацией перехода страниц.
  • Если какое-либо содержимое входящей страницы не готово к немедленному отображению, используйте анимацию перехода страниц для отображения всего готового на тот момент содержимого. Тем временем, пока вы готовите дополнительное содержимое, при необходимости отобразите индикатор хода выполнения. Когда дополнительное содержимое будет готово для отображения, анимируйте его в нужном месте в зависимости от области содержимого. Для крупной области содержимого используйте анимацию перехода содержимого. Для небольшой области содержимого и несплошного содержимого используйте анимацию появления.
  • Переместите страницу в представление, соответствующее общему интерфейсу страницы или направлению чтения. Например, если содержимое входящей страницы читается слева направо, то входящая страница должна перемещаться справа налево. В приложениях с порядком чтения справа налево входящая страница должна перемещаться слева направо. Аналогичным образом, когда вы разделяете страницу на разделы, как показано на следующих иллюстрациях, разделы должны отображаться в порядке, противоположном порядку чтения.
  • Не запускайте анимации перехода между страницами, если пользователь изменяет размер окна приложения. Анимации перехода между страницами используются только для перехода от одной страницы к другой в определенном представлении. Система обрабатывает анимацию при переходе от старого макета к новому, когда изменяется представление.

Дополнительные рекомендации по использованию

Наиболее часто встречающиеся разделения страниц, включая порядок их появления, показаны здесь:

Разделение содержимого страницы

Здесь показана самая распространенная схема разделения на страницы с кнопкой "Назад". Если на исходящей странице нет кнопки Назад (например, на первой странице приложения), а на входящей странице она есть, кнопка Назад должна быть указана как отдельная область, причем эта область должна анимироваться для просмотра раньше всех остальных.

Разделение содержимого страницы

Здесь приводятся самые распространенные схемы разделения на страницы в приложении, которое отображается в масштабированном и книжном представлениях, и порядок их появления. Если кнопка Назад уже есть на исходящей странице, ее нужно оставить на месте, а не включать в анимацию.

Разделение содержимого страницы в масштабированном и книжном режимах представления

Связанные разделы

Для разработчиков
Руководство по добавлению и удалению
Руководство по анимациям перехода содержимого
Руководство по анимациям перетаскивания
Руководство по анимациям пользовательского интерфейса с использованием края
Руководство по анимациям исчезания
Руководство по анимации нажатия указателя
Руководство по анимации изменения положения
Руководство по анимации всплывающих элементов пользовательского интерфейса
Руководство по анимации прокрутки
Для разработчиков (HTML)
Пример библиотеки анимации HTML
Анимация пользовательского интерфейса
Анимация переходов между страницами
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
Для разработчиков (XAML)
Анимация пользовательского интерфейса
Анимация содержимого и переходов при его появлении
Краткое руководство: анимация пользовательского интерфейса с помощью библиотеки анимации
EntranceThemeTransition class

 

 

Показ:
© 2015 Microsoft