页面过渡动画指南

Applies to Windows and Windows Phone

使用页面过渡动画可显示新启动应用的第一页或在一个应用的页面之间过渡。

注意  在只有部分屏幕内容更改时,应使用内容过渡动画而不是页面过渡动画。

应做事项和禁止事项

  • 将页面沿自然边缘或边界划分为一组(2 到 5 个)区域。对这些区域应用交错计时,使这些区域按顺序显示而不是一次全部显示,然后将区域偏移 100 像素以得到较宽的应用布局。如果你的应用具有用于较窄状态的特殊布局,你可以使用较小的偏移。有关最常用的页面分区和它们应该显示的顺序,请参阅其他使用指南
  • 确保传出和传入页面共有的任何内容在原位不动,对它们不应用任何动画。例如,如果“上一页”按钮同时显示在传出和传入页面,则该按钮不应包括在过渡动画中。
  • 如果传出页面没有“上一页”按钮(如显示的第一页),但传入页面有,则“上一页”按钮应指定为单独的区域,并且该区域应先于任何其他区域以动画形式进入视图。
  • 如果传出和传入页面有不同的背景,则使用淡入动画显示新背景。在页面过渡动画的同时启动淡入动画。
  • 如果传入页面中的某些内容不准备立即显示,则使用页面过渡动画尽可能多地引入在该时间准备好的内容。同时,如有必要,在准备好附加内容时显示进度控件。在准备显示附加内容之后,基于其内容区域以动画形式放入到位。对于较大内容区域,请使用内容过渡动画。对于较小内容区域或不连续内容,请使用淡入动画
  • 根据常规页面流或阅读顺序将页面滑入视图。例如,如果传入页面中的内容从左到右流动,则传入页面应从右到左滑入。在使用从右到左阅读顺序的应用中,传入页面应从左到右滑入。同样,在如下图所述将一个页面滑入各部分时,将这些部分引入视图的顺序应与阅读顺序相反。
  • 当用户调整应用窗口大小时,不要允许页面过渡动画。页面过渡动画仅用于在某个特定视图中从一个页面导航到另一页面。当视图更改时系统将处理新旧布局之间的动画。

其他使用指南

下面显示了最常见的页面分区(包括它们应显示的顺序):

常见的页面分区

带有后退按钮的最常用的页面分区如下所示。如果传出页面没有“上一页”按钮(如显示的第一页),但传入页面有,则“上一页”按钮应指定为单独的区域,并且该区域应先于任何其他区域以动画形式进入视图。

常见的页面分区

下面显示了与采用较窄的纵向视图显示的应用一起使用的最常见的页面分区,以及它们应显示的顺序。如果“上一页”按钮已经显示在传出页面上,则应保持原位不动,不应包括在动画中。

以调整大小后的视图或纵向视图显示常见的页面分区

相关主题

对于设计人员
添加和删除指南
创建过渡动画指南
拖动动画指南
基于边缘的 UI 动画指南
淡化动画指南
指针单击动画指南
重新定位动画指南
弹出 UI 动画指南
轻扫动画指南
对于开发人员 (HTML)
HTML 动画库示例
创建 UI 动画
创建页面过渡动画
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
对于开发人员 (XAML)
创建 UI 动画
创建内容和进入过渡动画
快速入门:使用库动画创建 UI 动画
EntranceThemeTransition class

 

 

显示:
© 2015 Microsoft