cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve inertial scrolling

Browse Source 
[This post](http://stackoverflow.com/a/3628949/362702) claims that in Apple's kinetic scrolling, "The velocity of the touch is measured at the exact moment that the finger is lifted."

I tried both this "final velocity" approach and the "max velocity" approach proposed in #2987. Both allow a stronger "fling" than the current "average velocity" approach, but "max velocity" can feel wrong if you slow down at the end of your swipe.

But because the "final velocity" approach uses just one data point it can be unstable, occasionally giving a too-large velocity from a small time delta.

Best is to stabilize that by averaging a few data points, so we're back to "average velocity" but using a shorter time period. Averaging over 50 ms instead of 100 ms gives good results, usually 4 data points on both my iPhone 4s and Chrome on my Windows laptop.

Another reason the current code has a weak fling is that the velocity was being calculated incorrectly. Because `delay` was added to the time delta, time was computed from n+1 points but distance from n points.

I also changed the default value of `inertiaThreshold` (intended to prevent unwanted additional movement if you stop dragging and then lift your finger) to `Infinity`, for two reasons:

1) A fling gesture often failed on my iPhone because the measured `delay` was higher than `inertiaThreshold` (current default 32), sometimes by hundreds of ms.
2) With the updated velocity code I don't see unwanted additional movement when I stop dragging and then lift my finger.

There is a remaining issue (with both the original and updated code). If you fling the map and try to fling it again before it stops moving, no drag events are generated for the second fling so it has no effect. I don't see this problem with e.g. Google or Apple maps. Entered as #3062.

Fixes #2987
This commit is contained in:
Rick Mohr 2014-11-25 15:32:53 -05:00
parent 9128193e5b
commit 08d828f519
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/map/handler/Map.Drag.js
View File

@ -8,7 +8,7 @@ L.Map.mergeOptions({
inertia: !L.Browser.android23,
inertiaDeceleration: 3400, // px/s^2
inertiaMaxSpeed: Infinity, // px/s
inertiaThreshold: L.Browser.touch ? 32 : 18, // ms
inertiaThreshold: Infinity,
easeLinearity: 0.2,
// TODO refactor, move to CRS
@ -72,7 +72,7 @@ L.Map.Drag = L.Handler.extend({
this._positions.push(pos);
this._times.push(time);
if (time - this._times[0] > 100) {
if (time - this._times[0] > 50) {
this._positions.shift();
this._times.shift();
}
@ -110,7 +110,7 @@ L.Map.Drag = L.Handler.extend({
options = map.options,
delay = +new Date() - this._lastTime,
noInertia = !options.inertia || delay > options.inertiaThreshold || !this._positions[0];
noInertia = !options.inertia || delay > options.inertiaThreshold || this._times.length < 2;
map.fire('dragend', e);
@ -120,7 +120,7 @@ L.Map.Drag = L.Handler.extend({
} else {
var direction = this._lastPos.subtract(this._positions[0]),
duration = (this._lastTime + delay - this._times[0]) / 1000,
duration = (this._lastTime - this._times[0]) / 1000,
ease = options.easeLinearity,
speedVector = direction.multiplyBy(ease / duration),