拖放动画的指南和清单(Metro 风格应用)

dragSourceStart 的合理使用

  • 用户开始直接移动对象时使用 dragSourceStart
  • 只有当有其他对象可能受到拖动影响时,才在动画中包括这些受影响的对象。
  • 在触发 dragSourceStart 动画开始拖放事件前,允许对象进行一些移动。这可以防止用户无意中拖动只想点击或选择的对象。建议的阈值为 20 TIP(与触摸无关的像素 )。
  • 使用 dragSourceEnd 来完成一个以 dragSourceStart 开始的动画事件。它将恢复由 dragSourceStart 引起的拖动对象的尺寸更改。

dragSourceEnd 的合理使用

  • 用户放下拖动对象时使用 dragSourceEnd
  • 当放下一个对象以重新对列表排序时,通常需要重新放置列表中的现有项目,从而为要放下的项目腾出空间。在 dragSourceEnd 动画之后,使用不带添加项目的 addToList 动画,因为添加的项目已经显示。这会让动画将所有元素移动到它们的适当位置。
  • 如果拖动源在放下后消失,则使用 fadeOut 动画。此动画的使用情况示例:将一个文件放到一个文件夹图标上以便在该文件夹中保存此文件。
  • 只有当在使用 dragSourceStart 动画时包含了受影响的对象时,使用 dragSourceEnd 时才需要包含这些对象。

dragSourceEnd 的不合理使用

  • 如果开始没有使用 dragSourceStart,请不要使用 dragSourceEnd 动画。必须使用这两个动画,这样在完成拖放事件后,所有对象才能恢复到原始大小。

dragBetweenEnter 的合理使用

  • 如果用户将某个对象拖动到的区域允许该对象放到其他两个对象之间,请在此对象进入拖放区域时显示 dragBetweenEnter 动画。
  • 选择一个合理的目标拖放区域。此区域不应该太小,否则用户难以放置拖放源。

dragBetweenEnter 的不合理使用

  • 如果拖放源无法放入某个区域,请不要使用 dragBetweenEnter 动画。dragBetweenEnter 告知用户拖动对象可以放在它下方的两个对象之间。

dragBetweenLeave 的合理使用

  • 如果用户将某个对象拖出的区域允许该对象放到其他两个对象之间,请在此对象离开拖放区域时显示 dragBetweenLeave

dragBetweenLeave 的不合理使用

清单

有关常规的 Windows 应用商店要求,请参阅 Windows 应用的认证要求

相关主题

使用“动画库”动画的示例

使用动画库创建 UI 元素的动画

快速入门:动画

WinJS.UI.Animation 命名空间