Руководство по анимациям перетаскивания

Applies to Windows and Windows Phone

Используйте анимацию перетаскивания, когда пользователь перемещает объекты, например передвигает элемент в списке или размещает один элемент выше другого.

Рекомендации

Анимация начала перетаскивания

  • Используйте анимацию начала перетаскивания, когда пользователь начинает перемещать объект.
  • Включайте затронутые объекты в анимацию, только если имеются другие объекты, которые могут быть затронуты при операции перетаскивания.
  • Разрешите пользователю слегка переместить объект, прежде чем запустится анимация начала перетаскивания. Это позволит пользователям избегать случайного перетаскивания объекта, которого они хотели коснуться или который необходимо просто выбрать. Рекомендуемый порог составляет 20 сенсорно-независимых пикселей.
  • Используйте анимацию окончания перетаскивания для завершения любой последовательности анимации, которая началась анимацией начала перетаскивания. Это отменяет изменение размера перетаскиваемого объекта, вызванное анимацией начала перетаскивания.

Анимация окончания перетаскивания

  • Используйте анимацию окончания перетаскивания, когда пользователь отпускает перетаскиваемый объект.
  • Когда пользователь отпускает объект для изменения порядка списка, часто требуется изменить положение других элементов списка, чтобы освободить место для отпускаемого элемента. Для этого после завершения анимации окончания перетаскивания используйте анимацию списка для добавления элемента, но без добавляемого элемента. Добавляемый элемент уже присутствует. В результате все элементы переместятся в соответствующие положения.
  • Если источник перетаскивания исчезает после отпускания (например, когда пользователь отпускает файл на значке папки для хранения файла в этой папке), используйте анимацию исчезания в источнике перетаскивания.
  • Включайте затронутые объекты в анимацию окончания перетаскивания, только если они включены в анимацию начала перетаскивания.
  • Не используйте анимацию окончания перетаскивания, если перед этим не использовалась анимация начала перетаскивания. Эти две анимации следует использовать вместе, чтобы можно было вернуть исходный размер объектов после завершения последовательности перетаскивания.

Анимация размещения между объектами

  • Используйте анимацию размещения между объектами, когда пользователь перемещает источник перетаскивания в область перетаскивания, в которой его можно поместить между двумя другими объектами.
  • Выберите подходящую целевую область перетаскивания. Она должна быть не слишком маленькой, чтобы пользователю было легко разместить источник перетаскивания для отпускания.
  • Рекомендованное расстояние для перемещения затронутых объектов, которые требуется отобразить в области перетаскивания, составляет 40 пикселей.
  • Рекомендованное направление для перемещения затронутых объектов, которые требуется отобразить в области перетаскивания, — в противоположные стороны друг от друга. Как именно будут перемещаться объекты (по горизонтали или по вертикали), определяется положением затронутых объектов относительно друг друга.
  • Не используйте анимацию перетаскивания между входом, если источник перетаскивания невозможно разместить в области. Анимация перетаскивания между входом означает, что источник перетаскивания можно поместить между затронутыми объектами.

Анимация извлечения из области между объектами

  • Используйте анимацию извлечения из области между объектами, когда пользователь перемещает объект из области, в которой его можно было бы поместить между двумя другими объектами.
  • Не используйте анимацию извлечения из области между объектами, если сначала не использовалась анимация размещения между объектами.

Связанные разделы

Для разработчиков
Руководство по добавлению и удалению
Руководство по анимациям перехода содержимого
Руководство по анимациям пользовательского интерфейса с использованием края
Руководство по анимациям исчезания
Руководство по анимации перехода страницы
Рекомендации для анимации нажатия указателя
Рекомендации для анимации изменения положения
Рекомендации для анимации всплывающих элементов пользовательского интерфейса
Рекомендации для анимации прокрутки
Для разработчиков (HTML)
Пример библиотеки анимации HTML
Анимация пользовательского интерфейса
Анимация этапов перетаскивания
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter
Для разработчиков (XAML)
Анимация пользовательского интерфейса
Анимация этапов перетаскивания
Краткое руководство: анимация пользовательского интерфейса с помощью библиотеки анимации
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation

 

 

Показ:
© 2014 Microsoft