Управление скоростью / инерцией при перетаскивании
Я построил вертикальный слайдер в своем веб-приложении с поддержкой событий перетаскивания мышью и Hammer.js. В конце перетаскивания (когда пользователь отпускает кнопку мыши или убирает палец с экрана, иначе dragend
событие), если вышеупомянутое находится ближе к середине, оно перемещается к середине и наоборот.
Дело в том, что когда событие драгенд инициируется на уровне 48%, когда пользователь перетаскивает мышь снизу вверх (что означает, что верхняя точка будет перемещена в середину), если скорость достаточно высока, нижняя должна быть перемещена в середину. Как рассчитать, если скорость достаточно высока?
2 ответа
Я решил это так:
// y is the drag amount
// visible height
var height = $(this).height()
// difference
var diff = (Math.abs(y) % height) / height
// I checked Hammer.js's source. It defines velocity as the change in 16ms.
// So multiplying it by 62.5 gives you the change in 1s.
// Not sure why I did that, but works pretty well in most situations
var inertia = event.gesture.velocityY * 62.5
if (
(event.gesture.direction == 'up' && diff + (inertia / height) >= 0.5) ||
(event.gesture.direction == 'down' && diff - (inertia / height) >= 0.5)
) {
// show the one below
} else {
// show the one above
}
В Microsoft WPF (теперь с открытым исходным кодом) инерционная скорость основана на взвешенном скользящем среднем нескольких последних значений позиции (с соответствующими временными метками).
См. ManipulationSequence.cs иOnCompletedManipulation()
метод (в настоящее время начиная со строки 558). Скорости перемещения (т. е. X и Y), расширения и вращения рассчитываются на основе скользящей истории значений с отметками времени вCalculateWeightedMovingAverage()
метод.