语言: HTML | XAML

创建基于边缘的 UI 动画 (HTML)

Applies to Windows only

使用基于边缘的 UI 动画可以显示或隐藏源自屏幕边缘的 UI。用户或应用可以将此 UI 移入视图。这些动画主要用于自定义控件;现有控件(例如 AppBar)具有边缘 UI 内置的库动画,并且你将仅通过在 UI 中包括此类控件来获取动画的表现方式。

此 UI 可以覆盖应用,也可以作为主应用表面的一部分。如果此 UI 是主应用表面的一部分,则可能需要调整应用其余部分的大小,以便在显示时为新 UI 腾出空间。

基于边缘的元素的基本图

此动画集包括以下 API:

共有两类基于边缘的元素,每类元素都有自己的一组动画 API:边缘 UI 和面板 UI。

以下视频演示显示和隐藏基于边缘的 UI 的动画:

以下视频演示显示和隐藏面板的动画:

  • 如果你旨在创建自定义控件(该控件的行为与 AppBar 或类似控件的行为相似)的动画,请使用具有基于边缘的较小 UI 的边缘 UI 动画。你可能还想要定义来自应用中操作的错误和警告的 UI 界面/区域。如果你要处理该方案,请确保阅读浮出控件指南;基于边缘的 UI 可能不适用于你的方案。
  • 面板 UI 动画一般用于较大型且覆盖更多应用窗口的基于边缘的 UI,例如软键盘。

该图显示了边缘 UI 和面板 UI 之间的大小不同

要点  Windows 提供的应用栏控件包括边缘 UI 动画。如果你在使用该控件,则不需要自己提供这些动画。

若要使用这些动画,你需要知道:

  • 将滑入或滑出的对象。
  • 对象的滑动距离(偏移)。这将是 UI 内部边缘和屏幕边缘之间的最终距离。

    偏移量测量的示意图

采用默认 Windows 运行时控件行为的基于边缘的动画

包括边缘 UI 的建议方法是添加 AppBar,该方法将为你自动应用所有合适的过渡和交互行为。有关详细信息,请参阅添加应用栏

浮出控件对象(FlyoutMenuSettingsFlyout)也具有内置动画,但它们不是真正基于边缘的 UI。浮出控件与导致它们出现的上下文相关联,不与应用窗口的边缘相关联。你可以将浮出控件用于通过 AppBar 调用的 UI,但这也不是纯粹的边缘 UI。有关详细信息,请参阅添加浮出控件以及创建弹出 UI 动画

其他资源

有关用于展示基于边缘 UI 动画 API 的使用的代码示例,请参阅 HTML 动画库示例

有关设计这些动画的使用的最佳做法,请参阅基于边缘的 UI 动画指南和清单

相关主题

创建 UI 动画
showEdgeUI
hideEdgeUI
showPanel
hidePanel

 

 

显示:
© 2015 Microsoft