Поделиться через


Анимация жестов прокрутки (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Используйте анимации прокрутки в реализации модели выбора касанием в Windows 8 (называемой прокрутка) для выбора элемента.

В этот набор анимаций входят следующие API (все эти три анимации необходимы для реализации взаимодействия при помощи прокрутки):

В следующем видео показана анимация обнаружения прокрутки:

В следующем видео показана анимация выбора и отмены выбора с помощью прокрутки:

Примечание

 Элемент управления ListView содержит анимации выбора касанием и анимации прокрутки, поэтому при использовании этого элемента их не нужно реализовывать.

 

Выбор прокруткой

Используйте анимацию выбора прокруткой, когда пользователь перетаскивает элемент, который поддерживает выбор прокруткой. Пользователь должен перетащить элемент достаточно далеко, чтобы выбрать его, и после этого отпустить. Анимация выбора прокруткой добавляет индикатор выбора (обычно в виде флажка), который указывает на то, что элемент выбран, и возвращает элемент на место.

Иллюстрация, которая показывает этапы анимации выбора прокруткой: перемещение и установку флажка

Чтобы использовать эту анимацию, вам необходимо знать индикатор выбора, который будет отображаться, а также направление и длительность анимации.

Отмена выбора прокруткой

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

Иллюстрация, которая показывает этапы анимации отмены выбора прокруткой: перемещение и снятие флажка

Чтобы использовать эту анимацию, вам необходимо знать индикатор выбора, который будет скрыт, а также направление и длительность анимации.

Обнаружение прокрутки

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

Иллюстрация, которая показывает этапы анимации обнаружения прокрутки: перемещение и снятие флажка

Чтобы использовать эту анимацию, вам необходимо знать направление и длительность анимации. Анимация должна проигрываться последовательно два раза: сначала — чтобы переместить элемент в указанном направлении, и еще раз — чтобы вернуть его на место.

Другие ресурсы

Примеры кода, демонстрирующие использование API анимации прокрутки, см. в Примере библиотеки анимации HTML.

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

Анимация пользовательского интерфейса

swipeReveal

swipeSelect

swipeDeselect