Alex Rivera | Logout

Algorithm to implement kinetic scrolling

Asked 2009-11-27T21:53:48.357
29

What are some good algorithms for creating a kinetic scrolling implementation? The feature would be tested on a custom UI list. While I am targeting mobile devices (those that do not have this feature built-in), any algorithm or code example from different programming field may also suit.

Edit
Report

1 Answer

17

I just added a scroller widget to my mobile GUI framework, so I thought I'd share my solution here.

Since this is a pretty complex issue, I decided to divide it up into smaller somewhat independent subtasks, as follows:

  1. Basic scrolling functionality: this task consisted in handling drag events in the simplest way, which is by scrolling the contents according to the drag distance and direction. This was relatively straightforward to implement, the only tricky aspect was to know when to start a drag operation vs. when to pass down a tap event to a child widget inside the scrollable area.

  2. Scroll inertia: this one was the most challenging. The idea here is that scrolling should continue for some time after the user lifts the finger, slowing down until it stops completely. For this I needed to have an idea of the scroll velocity. Unfortunately it is not accurate to compute the velocity from a single sample, so while the user is scrolling I record the last N motion events in a circular buffer, along with the time at which each event occurred. I found N=4 to work just fine on the iPhone and on the HP TouchPad. When the finger is lifted I can compute an approximate start velocity for the inertial scrolling from the recorded motion. I defined a negative acceleration coefficient and used standard motion formulas (see here) to let the scrolling die down nicely. If the scroll position reaches a border while still in motion I just reset the velocity to 0 to prevent it from going out of range (the abrupt stop is addressed next).

  3. Flexible scrolling limits: instead of going into an abrupt stop when the scroll reaches the end I wanted the widget to scroll some, but offering resistance. For this I extended the allowed scroll range on both ends by an amount that I defined as a function of the widget dimensions. I've found that

answered 2011-08-29T00:08:51.130

Your Answer