tags:

views:

256

answers:

2

I have a page in my desktop app, and I've implemented simple grab-and-pan. It works great.

When you are panning in this way and you are release, the page stops dead where you dropped it.

I'd like it to continue slightly with some momentum, and stop eventually. Rather like the 'throw' in the iPhone UI, I guess.

I'm not really chasing perfection, just a very crude simple sense of being able to 'throw' that page.

+1  A: 

Just keep track of the current velocity of the page, in addition to its position. When the user releases, set the velocity to the last amount by which you panned. Then, in subsequent frames, continue panning by the current velocity, and decrease the current velocity by some fixed amount (in magnitude) until it reaches zero.

Adam Rosenfield
+2  A: 

You can calculate the velocity of the movement by tracking the position. Due to the lack of precision, and for smoothing reasons, you will want to average the last multiple positions, assuming they were taken at nearly even time-frame apart from one another.

Once you have the average of these, you can adjust your velocity according to how much you want the effect to show. Simply add a constant multiplier to the average once you have calculated it.

From here, you will move the window by this velocity, decreasing the velocity until it hits 0. The rate of decrease also depends on personal preference. If you want the window to move over a longer period, you will be decrease the velocity at a slower rate than if you wanted it to stop faster.

If you want a "bounce" effect, simply check for when the window hits the side of the screen. If it hits the left or right (that is, the WindowX <= 0 or WindowX + WindowWidth >= ScreenWidth), multiply the X velocity by -1 to send it in the other direction. Same goes for the Y axis. If you do not add a "bounce" effect, I would recommend at least doing the same check, but when it hits the side of the screen, you force it back into the screen (that is, WindowX >= 0 and WindowX <= ScreenWidth - WindowWidth) the set the velocity to 0, stopping the animation completely.

I would recommend, too, that you add a cap on the maximum velocity (ie between -x and x units). This will prevent the odd case where "something" happens and the velocity ends up at an insane number, and the screen bounces at a million miles per hour all over.

Spodi