Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Algorithm to implement kinetic scrolling

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.

like image 274
Bojan Milankovic Avatar asked Nov 27 '09 21:11

Bojan Milankovic


1 Answers

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 can be found 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.

like image 161
Breton Avatar answered Oct 21 '22 16:10

Breton