轻扫动画指南

当你为选择项目实现轻扫手势时,请使用轻扫动画。

建议

  • 如果用户在释放项目之前没有将其拖动到远处,以致于无法切换选择状态,请使用轻扫选择动画,将该项目返回其停留位置而不更改选择状态。
  • 确保轻扫动画的方向与用户轻扫手势的方向匹配。
    • 对于水平滚动的内容,轻扫方向是垂直的,这样轻扫动画的顺序应是先向下移动,然后向上返回。
    • 对于垂直滚动的内容,轻扫方向是水平的,这样轻扫动画的顺序应根据应用的阅读顺序水平移动。
      • 对于具有从左到右阅读顺序的应用,动画应先向右移动,然后向左移动。
      • 对于具有从右到左阅读顺序的应用,动画应先向左移动,然后向右移动。
  • 作为轻扫动画移动项目的建议距离,该距离为 15 个像素(如果垂直移动)或 23 个像素(如果水平移动)。

相关主题

对于设计人员

添加和删除指南

创建过渡动画指南

拖动动画指南

基于边缘的 UI 动画指南

淡化动画指南

页面过渡动画指南

指针单击动画指南

重新定位动画指南

弹出 UI 动画指南

对于开发人员 (XAML)

创建 UI 动画

创建轻扫手势动画

快速入门:使用库动画创建 UI 动画

SwipeHintThemeAnimation class

SwipeBackThemeAnimation class

对于开发人员 (HTML)

HTML 动画库示例

创建 UI 动画

创建轻扫手势动画

WinJS.UI.Animation.swipeReveal function

WinJS.UI.Animation.swipeSelect function

WinJS.UI.Animation.swipeDeselect function