Язык: HTML | XAML

Анимация пользовательского интерфейса по краям экрана (HTML)

Applies to Windows only

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

Элементы пользовательского интерфейса могут перекрывать приложение либо становиться частью основной поверхности приложения. Если эти элементы интерфейса являются частью основной поверхности приложения, может понадобиться изменить размер остальной части приложения, чтобы освободить место для появившихся элементов.

Базовая схема элемента у края экрана

В этот набор анимаций входят следующие API:

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

В следующем видео показаны анимации, отображающие и скрывающие элементы пользовательского интерфейса по краям экрана:

В следующем видео показаны анимации отображения и скрытия панелей:

  • Используйте анимации по краям с элементами управления небольшого размера, если необходимо анимировать пользовательские элементы управления, похожие на AppBar или другие подобные элементы. Кроме того, может возникнуть необходимость задать область или поверхность для отображения предупреждений и сообщений об ошибках приложения. Если у вас именно такая ситуация, обратитесь к Руководству по всплывающим элементам. Анимация по краям может не подойти для данного случая.
  • Используйте анимацию панелей для отображения у края экрана более крупных элементов пользовательского интерфейса, которые закрывают большую часть окна приложения, например для экранной клавиатуры.

Иллюстрация, демонстрирующая различие в размере элементов интерфейса у края экрана и панелей

Важно  Элемент управления панель приложения, предоставляемый Windows, включает анимацию элементов пользовательского интерфейса у края экрана. При использовании этого элемента управления нет необходимости создавать такие анимации самостоятельно.

Для использования этих элементов анимации вам нужно знать:

  • Какой объект разворачивается или сворачивается.
  • На какое расстояние (смещение) двигается объект. Это конечное расстояние между внутренним краем элемента пользовательского интерфейса и краем экрана.

    Иллюстрация измерения смещения

Стандартная анимация по краям экрана элементов управления из среды выполнения Windows

Рекомендуемый способ использования элементов управления по краям экрана — это добавление AppBar, при этом автоматически будут применены все соответствующие переходы и эффекты взаимодействия. Подробнее: Добавление панелей приложения.

Всплывающие объекты (Flyout, Menu или SettingsFlyout) тоже имеют встроенные анимации, но они не являются полнофункциональными элементами управления по краям экрана. Всплывающие элементы связаны с контекстом, которым обусловлено их отображение, а не с краями окна приложения. Вы можете использовать в пользовательском интерфейсе всплывающие элементы, которые вызываются из AppBar, но это тоже не полнофункциональные элементы управления у края экрана. Подробности: Добавление всплывающих элементов и обычных меню и Анимация пользовательского интерфейса со всплывающими элементами.

Другие ресурсы

Примеры кода, демонстрирующие использование API анимации по краям экрана, см. в примере HTML animation library.

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

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

Анимация пользовательского интерфейса
showEdgeUI
hideEdgeUI
showPanel
hidePanel

 

 

Показ:
© 2014 Microsoft