Algorithm to implement kinetic scrolling

Question

What are the good algorithms to apply to kinetic scrolling implementation? The feature would be tested on 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.

Thank you.

Answer 1

Well i think it would be something like a) get velocity of how fast user scrolled b) when he leaves his finger, auto scroll the list but with a decreasing velocity with an initial velocity of what the user had.

Answer 2

I implemented one myself recently. These are the steps I took.

1. You need to measure the velocity of your cursor (either mouse cursor or finger.
2. Implement a simple particle physics loop. information about how to do that here
3. give your particle "bounds" using math derived from the width of your scrolling plane, and the width of your viewport
4. continuously Add the the difference between the mouse velocity and the particle velocity, to the particle's velocity, so the particle's velocity "matches" the mouse's velocity for as long as it's moving.
5. Stop doing step 4 as soon as the user lifts their finger. The physics loop takes care of inertia.
6. Add your personal flourishes such as "bumper" margins, and smooth scrolling "anchor" points that operate on zeno's paradox for calculating motion.
7. I nearly forgot: Take the coordinates derived from above, and use it as the location of your scrolling plane.

I will probably open source this code soon. How soon do you need this?

edit:changed the link. Sorry, pointed to slightly the wrong page. edit2: or not? Anyway, original page I linked to was first link on currently linked page.

Answer 3

Since this was originally asked, I have since carefully read the source code for pastrykit, the framework in which apple has exactly duplicated their kinetic scrolling in javascript. There is no particle physics loop- The velocity of the touch is measured at the exact moment that the finger is lifted. From that point forward, the scroll is animated using a simple easing function that uses the velocity as an input parameter.