Инерционные устройства ввода — это такие устройства, как сенсорные экраны, трекпады, волшебная мышь и т. д. По своей работе трекпады и волшебные мыши напоминают сенсорные экраны мобильных устройств, т.е.
продолжают генерировать события колесика мыши после того, как пользователь завершил жест. Но в отличие от них у нас нет встроенного события touchstart. Все, что у нас есть, это объект события колесо .
Тачстарт часто необходим для комфортной реализации работы так называемых полностраничных сайтов, где при прокрутке происходит переход между экранами.
Примером такого сайта может быть Альфабанк .
Также возникает проблема с прокруткой двух экранов подряд при использовании волшебной мыши или трекпада (особенно на MacBook).
Довольно слабый жест прокрутки прокручивает вниз до второго, а затем сразу до третьего экрана.
Чтобы попасть на второй экран, вам придется использовать полосу прокрутки.
Именно такую задачу мы пытались решить, используя только Объект события колеса .
Итак, как реализовать Touchstart? Начнем с самого простого и будем двигаться постепенно.
Простейшая реализация touchstart: 0. Тишина.
1. Начинает генерироваться событие колеса.
Это наш сенсорный старт 2. Предположим, что между событиями не может быть больше 200мс (реально от 10 до 30мс), поэтому просто через 200мс после последнего события мы снова генерируем touchstart при появлении новых объектов событий.
Это уже неплохо, две страницы одним движением точно не пролистнутся.
Но есть существенная проблема: попытка начать новую итерацию прокрутки до окончания текущей только удлинит текущую.
Чтобы решить эту проблему, необходимо понять момент, когда пользователь совершил новый жест до завершения предыдущей итерации.
Проанализировав объект события колеса, мы сразу заметили поле deltaY. Он отражает силу, с которой в данный момент работает устройство.
Если отобразить значения deltaY на графике, жест будет выглядеть примерно так: 
И это то, что нам нужно поймать.
Таким образом, задача сводится к сравнению предыдущего значения deltaY с текущим.
А если оно больше, то у пользователя началось новое осознанное движение, то есть произошел новый тачстарт. Вроде бы все хорошо, интерфейс стал более отзывчивым, теперь можно делать любое количество жестов подряд, не дожидаясь завершения предыдущей итерации.
Но на практике алгоритм не сработал: часто touchstart генерировался чаще, чем нужно.
Иногда 2-3 раза за одну итерацию.
Почему это случилось? Анализ числового ряда deltaY с одной итерации показал, что иногда, несмотря на снижение итерации (то есть замедление инерции, выраженное во все меньших значениях deltaY в каждом последующем колесном событии), иногда текущая deltaY может быть равна или больше предыдущего.
А иногда такое происходило через раз:
21, 17, 15, 18 , 12, 14 , 10, 7… 
или два последовательных увеличения
21, 17, 15, 18 , 19 , 14, 10…
Многочисленные эксперименты показали, что такие ситуации практически никогда не случаются более трёх подряд в обоих случаях.
Вносим коррективы в алгоритм: теперь touchstart генерируется только в том случае, если текущая deltaY больше предыдущей и следующая deltaY больше текущей.
Теперь все работает хорошо и явных проблем больше нет. Взяв за основу этот подход, мы написали плагин колесо-индикатор .
В анализе используются и другие факторы, но описывать их все в данной статье нет смысла.
Обычные мыши
Плагин также можно использовать в качестве простой замены известного JQuery-колесо мыши в тех случаях, когда вам нужно только определить направление работы колеса кроссбраузера.Если мышь пользователя вызывает слишком много событий, плагин также нормализует это.
Иногда это полезно, например, прокрутка колесиком такая карусель не очень удобно.
Кроме того, на базе плагина можно реализовать неблокирующие интерфейсы.
Например, Здесь во время анимации можно прокручивать в любом направлении, а количество переходов будет равно количеству жестов пользователя.
Тестирование Т.
к.
этот алгоритм не окончательный и может быть улучшен; Я хотел иметь возможность это проверить.
По сути, плагин принимает на вход числовой ряд из deltaY и анализирует его.
Это означает, что nodejs достаточно для написания тестов и travis-ci.org для тестирования коммитов.
Чтобы иметь возможность протестировать плагин в nodejs, необходимо, чтобы он мог экспортировать себя в формат commonjs. Для этого добавим проверку и экспорт конструктора:
Ввод в плагин поступает через объект события после создания обработчика с помощью addEventListener. Таким образом, в тестах нам нужно «спрятать» этот метод:if (typeof exports === 'object') { module.exports = WheelIndicator; }
global.document = {
addEventListener: function(type, handler){
currentDeltaArr.forEach(function(delta){
handler({
deltaY: delta
});
});
}
};
, где delta — это массив серий тестовых чисел из deltaY. Чтобы удобно получать такие серии с различных устройств и ОС, мы сделали испытательный стенд .
Вот и все, теперь остается только запросить плагин, создать экземпляр и сравнить полученные от плагина данные с эталонными данными.
Пример входных данных для теста: down: {
moves: [ 'down' ],
delta: [1,4,12,32,55,69,154,156,158,148,137,130,122,116,111,108,103,97,93,88,84,80,74,71,65,61,57,54,50,46,42,39,36,33,31,27,25,23,21,18,17,15,14,13,12,11,9,8,8,7,6,6,14,4,4,3,3,3,2,2,4,1,2,1,1,1,1,1,1,1,1,1,1],
device: 'Mac OSX notebook trackpad'
}
О подключении, документации и загрузке плагина можно прочитать на сайте страница репозитория .
Теги: #Magic Mouse #колесо #mousewheel #инерционные устройства #Разработка сайтов #JavaScript
-
Я Хочу Красивую Аппаратуру
19 Oct, 24 -
Индикатор На Лобовом Стекле Автомобиля
19 Oct, 24 -
Google Chrome Против Загрузчика Файлов
19 Oct, 24 -
Amazon Выпустит 1000 Фильмов На Hd Dvd
19 Oct, 24
