创建轻扫手势动画 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

在实现 Windows 8 触摸选中模式(称为“轻扫”)**以选中某个项时,使用轻扫动画。

此动画集包括以下 API。在实现轻扫交互时,必须使用所有这三个动画:

以下视频演示轻扫显示动画:

以下视频演示轻扫选中和取消选中的动画:

备注

ListView 控件包含触摸选择和轻扫动画,因此当你使用该控件时,无需实现这些动画。

 

轻扫选中

在用户拖动支持轻扫选中的项目时,使用轻扫选中动画。用户必须将该项目拖动到足够的位置才能选中它,选中之后即可松开它。轻扫选中动画添加选中指示(通常是一个选中标记),该指示显示项目上的“选中”状态并将该项目返回其停放位置。

此图显示了轻扫选中动画中的步骤:移动和选中

若要使用此动画,你需要知道将显示的选中指示器以及动画的方向和距离。

轻扫取消选中

当用户拖动当前选中的项目足够远以取消选中该项目,然后释放该项目时,使用轻扫取消选中动画。轻扫取消选中动画从项目中删除选中指示,并将该项目返回其停放位置。

此图显示了轻扫取消选中动画中的步骤:移动和取消选中

若要使用此动画,你需要知道将隐藏的选中指示器以及动画的方向和距离。

轻扫显示

轻扫显示动画用于向用户显示项目支持轻扫交互。当用户按住支持轻扫交互的项目时,动画将该项目向下移然后再返回,指示该项目支持轻扫交互。

此图显示了轻扫交互动画中的步骤:移动和取消选中

若要使用此动画,你需要知道动画的方向和距离。该动画必须按顺序播放两次;一次按指定的方向移动项目,然后再将项目移回停放位置。

其他资源

有关用于展示轻扫动画 API 的使用的代码示例,请参阅 HTML 动画库示例

相关主题

创建 UI 动画

swipeReveal

swipeSelect

swipeDeselect