创建 UI 动画 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
通过使用 Windows 提供的动画的“动画库”套件，你可以将 Windows 8 外观和感觉集成到 Windows 应用商店应用中。本文提供了“动画库”所处理的典型方案的动画和示例汇总。
使用“动画库”动画具有以下优势：
- 符合 Windows 应用商店应用动画原则的运动
- 在 UI 状态之间进行快速流畅的过渡，通知用户但不会使用户分心
- 在应用中表明用户切换的更清晰的视觉效果
例如，当用户将某个项添加到列表时，新项不会立即出现在列表中，而是新项采用动画形式到达相应位置，并且列表中的其他项也采用动画形式移动到它们的新位置，以便为添加的项腾出空间。这种方式使用户非常清楚发生的操作，而即时过渡无法做到。
请注意，Windows 8 中引入的控件（如 ListView 控件、FlipView 控件、Flyout 控件以及 AppBar 控件）都使用“动画库”动画。在你的应用中使用这些控件，无需自己编程，即可获得 Windows 应用商店应用的动画外观。
动画库不为每个可能的方案提供动画，有时候可能需要创建自定义动画来体现你自己的品牌。你应仔细考虑在什么情况下不使用动画库动画。除非有非常明确的理由才这样做，例如为了突出某个特殊品牌或如果没有“动画库”动画适合这个方案。
有关使用本主题中介绍的 API 的示例代码，请参阅 HTML 动画库示例。
库中提供的动画
动画库提供以下动画。单击某个动画的名称即可了解有关其主要使用方案、执行这些方案的函数的详细信息，还可以查看动画示例。
- 页面过渡：让页面内容以动画方式进入或退出视图。
- 内容过渡：让一条或一组内容以动画方式进入或退出视图。
- 淡入/淡出：显示过渡元素或控件。
- 交叉进出：刷新内容区域。
- 指针向上/向下：提供点击或单击磁贴的视觉反馈。
- 展开或折叠：显示更多嵌入式信息。
- 重新定位：将元素移动到新位置。
- 显示/隐藏弹出元素：在视图顶部显示上下文 UI。
- 显示/隐藏边缘 UI：将基于边缘的 UI 滑入或滑出视图。
- 显示/隐藏面板：将基于边缘的较大面板滑入或滑出视图。
- 从列表中添加/删除：从列表中添加或删除项目。
- 从搜索列表中添加/删除：在筛选搜索结果时从列表中添加或删除项目。
- Peek：更新磁贴的内容。
- 锁屏提醒更新：更新数字锁屏提醒。
- 开始/结束拖动或两者间拖动：在拖放操作期间提供视觉反馈。
- 轻扫提示：提示磁贴支持轻扫交互。
- 轻扫选中/取消选中：将磁贴过渡到已轻扫选中的状态。
页面过渡
页面过渡将页面内容以动画方式进入或退出视图。这包括在初始屏幕后显示应用的第一页，以及在应用的页面之间过渡。
以下视频演示使页面内容进入视图中的动画：
以下视频演示在两个内容页面之间过渡的动画：
有关 UX 和使用指导的详细信息，请参阅页面过渡动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
内容过渡
使用内容过渡动画可以将一条内容或一组内容移入或移出当前视图。请勿将内容过渡（涉及到页面上的元素）与页面过渡（过渡整个页面）相混淆。例如，内容过渡动画用于显示在首次加载页面时，或者在更改页面某部分的内容时不准备显示的内容。
以下视频演示删除现有内容并使新内容进入视图中的动画：
有关 UX 和使用指导的详细信息，请参阅内容过渡动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
淡入/淡出
使用淡入和淡出动画可以显示或隐藏过渡 UI 或控件。一个示例就是在可能会由于用户交互而显示新控件的应用栏中。另一个示例涉及到临时滚动条或平移指示器，它们将在一段时间内未检测到任何用户输入时淡出。在随着动态加载内容而从占位符项过渡到最终项时，应用还应使用淡入动画。
以下视频演示将内容淡入视图和淡出视图的动画。请注意屏幕底部淡入和淡出的滚动条：
有关 UX 和使用指导的详细信息，请参阅淡化动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
交叉进出
使用交叉进出动画可以在某个项的状态发生改变时顺利进行过渡；例如，应用刷新视图的当前内容时。
以下视频演示交叉进出动画：
有关 UX 和使用指导的详细信息，请参阅淡化动画的指南和清单。
JavaScript：使用以下 API 可以执行此动画：
指针向上/向下
使用指针向上和指针向下动画可以为用户成功点击或单击磁贴提供反馈。例如，当用户单击或点击磁贴时，播放指针向下动画。当用户释放单击或点击后，播放指针向上动画。
以下视频演示指针向下和指针向上动画：
有关 UX 和使用指导的详细信息，请参阅指针动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
展开/折叠
使用展开动画可以在视图内容中增加额外的空间以显示更多嵌入式信息。例如，显示错误消息会导致视图中的其他内容发生移动，以便为该消息腾出空间。折叠动画隐藏此附加内容，以便显示有关特定项的较少详细信息。折叠动画通常由用户操作触发。
以下视频演示展开和折叠动画：
在 JavaScript 代码中使用以下 API 执行此动画：
重新定位
使用重新定位动画可以将某个元素移动到新位置。例如，在全景视图中移动标题将使用重新定位动画。
以下视频演示重新定位动画：
有关 UX 和使用指导的详细信息，请参阅重新定位动画的指南和清单。
JavaScript：使用以下 API 可以执行此动画：
显示/隐藏弹出 UI
使用显示和隐藏弹出 UI 动画可以显示或隐藏当前视图顶部的上下文 UI。例如，弹出 UI 可以显示有关元素中某个项目的更详细信息。在显示自定义上下文菜单或浮出控件时使用显示和隐藏弹出 UI 动画。
以下视频演示显示和隐藏弹出 UI 的动画：
有关 UX 和使用指导的详细信息，请参阅 弹出 UI 动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
显示/隐藏边缘 UI
使用显示和隐藏边缘 UI 动画可以将较小的基于边缘的 UI 滑入和滑出视图。例如，在屏幕底部显示自定义应用栏或在屏幕顶部显示用于错误和警告的 UI 表面时使用这些动画。
以下视频演示显示和隐藏基于边缘的 UI 的动画：
有关 UX 和使用指导的详细信息，请参阅基于边缘动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
显示/隐藏面板
使用显示和隐藏面板动画可以显示和隐藏面板，面板是基于边缘的较大 UI，例如自定义键盘或任务窗格。不要将这些动画与显示和隐藏边缘 UI 动画相混淆，后者用于较小的 UI 元素，这些元素使用边缘作为进入和退出点。
以下视频演示显示和隐藏面板的动画：
有关 UX 和使用指导的详细信息，请参阅基于边缘动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
添加到列表/从列表中删除
在现有的一维或二维列表中添加或删除一个项时，使用添加到列表和从列表中删除动画。添加到列表动画首先重新定位列表中的现有项，以便为新项腾出空间，然后添加新项。从列表中删除动画将从列表中删除项目，然后在移除删除的项目后，重新定位其余的列表项（如有必要）。
以下视频演示将项添加到列表和从列表中删除项的动画：
有关 UX 和使用指导的详细信息，请参阅列表动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
添加到搜索列表/从搜索列表中删除
在搜索期间，在列表中的项快速变化情况下使用添加到搜索列表和从搜索列表中删除动画。请注意，搜索列表动画快于标准列表动画。例如，如果用户输入某个搜索字词并且列表实时筛选结果，则筛选出的项应使用从搜索列表中删除动画。反之，用户可以搜索字符串然后按下 Backspace 以删除字符。这将导致项被添加回搜索结果的列表中，因此应使用添加到搜索列表动画实现此操作。
以下视频演示将项添加到搜索列表和从搜索列表中删除项的动画：
有关 UX 和使用指导的详细信息，请参阅列表动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
Peek
当磁贴由于磁贴高度不足以同时显示图片和文本而交替显示图片和文本时，使用组合动画更新磁贴。还可以使用此动画在磁贴上循环访问一组图片。
以下视频演示组合动画：
JavaScript：使用以下 API 可以执行此动画：
锁屏提醒更新
使用锁屏提醒更新可以更新显示数字的锁屏提醒。例如，如果邮件应用需要显示未读电子邮件数，则可以使用锁屏提醒更新动画来更新此值。
以下视频演示更新锁屏提醒的动画：
JavaScript：使用以下 API 可以执行此动画：
拖动开始/结束和在进入/离开间拖动
使用拖动动画可以在用户拖放一个项时提供视觉反馈。在用户开始拖动一个项时使用拖动开始动画。在用户放下项时使用拖动结束动画。
你可以选择使用在进入和离开间拖动动画，以向用户显示，可以围绕放下的项目重新排列列表。如果用户需要知道在当前位置放下该项目时会将该项目置于列表中的何处，则这样会很有帮助。在进入间拖动和在离开间拖动动画会提供视觉反馈，表明正在拖动的项可以放到列表中的其他两个项之间，并且这些项将腾出空间。
以下视频演示与拖放操作关联的动画：
有关 UX 和使用指导的详细信息，请参阅拖放动画的指南和清单。
在 JavaScript 代码中使用以下 API 执行此动画：
轻扫提示
使用轻扫提示动画可以表明磁贴支持轻扫交互。用户可以向下轻扫以选择磁贴。如果用户不知道他们是否可以在磁贴上轻扫，磁贴上的长按手势将播放轻扫提示动画，以暗示用户应该通过轻扫与磁贴交互。
以下视频演示轻扫动画：
JavaScript：使用以下 API 可以执行此动画：
轻扫选中/取消选中
在使用轻扫交互选择一个项时使用轻扫选中动画，以表明磁贴已转为选中状态，并将磁贴返回其停留位置。在使用轻扫手势取消选中已选中的磁贴时使用轻扫取消选中动画。
以下视频演示轻扫选中和取消选中的动画：
在 JavaScript 代码中使用以下 API 执行此动画：
将动画与自定义控件结合使用
下表概述了在创建这些系统控件的自定义版本时应当使用的动画建议：
| UI 类型 | 推荐动画 |
|---|---|
| 对话框 | fadeIn 和 fadeOut |
| 浮出控件 | showPopup 和 hidePopup |
| 工具提示 | fadeIn 和 fadeOut |
| 上下文菜单 | showPopup 和 hidePopup |
| 命令栏 | showEdgeUI 和 hideEdgeUI |
| 任务窗格或基于边缘的面板 | showPanel 和 hidePanel |
| 任意 UI 容器的内容 | enterContent 和 exitContent |
| 适用于控件或不应用其他动画时 | fadeIn 和 fadeOut |