Apple creates a lot of user interface innovations within products such as IPod.
I copied their Kinetic Scroller and implements it in a Flex Box (Vertical or Horizontal), for both direction.
Actually, I just play with scroll positions. If you want a good looking, the mathematical equations are really tricky because its a differential system but I spent 5 years to solve this kind of equations ^ ^ so I solve as a 1order system.
How it works?
You have still the equations, the variable t for time is replaced by a .. timer. You have just 2 mouse event handlers and 1 timer event handler:
- MouseDown: save the mouse position as reference (or offset)
- MouseUp: Calculate the delta position, then the ‘acceleration’
- TimerTick: Calculate the speed from the acceleration or from the delta position is mouse button is pressed
You can configure the user power.
Example
The example below is just a vertical list of images, you can scroll down using scrollbars or using the kinetic scrolling, and in both direction:
Sources
Click here to download the KineticBox.as
Use it as a Box, but its very important to set the size of your container as the same size of its parent:
<KineticBox height='{ID_PARENT.height}' ....
