views:

50

answers:

1

I have written some page turning software simulating a magazine. Currently the speed of the page turning is linear, and I want to make it more realistic with acceleration and deceleration.

At the start of the animation it should be slow, half way through it should have reached max speed, then it returns to a slow speed by the end of the animation.

Someone I knew told me it can be done if you know what percentage of the animation you are through, using sine or something similar!

So given a percentage representing how far through the animation you are, how can you set the speed?

Answers in pseduo or javascript welcome :)

function speed(percentageThroughAnimation)
{
    return ?????
}
+1  A: 

It's speed could be represented as a sinusoid function since pages are turning at an arc (more or less) and the page edge could be seen going at that speed. Could use a sine of the position of the page edge. That might work nice.

[edit]

javascript really isn't my forte but something like this maybe?

function speed(percentageThroughAnimation)
{
    //assuming percentage as indicator of page edge
    var pos = percentageThroughAnimation;

    //the (relative) speed is the sine of the position
    return Math.sin(Math.PI * pos);
}

Oops, corrected. Double oops. Should be in range [0, pi].

Jeff M
This is what I'm after, and basically understand how it works, but do you have a small formula how to achieve this in Javascript?
Tom Gullen
Thanks for the answer, it's nearly there but it gives out negative values and some other problems but I +1 you anyway :)
Tom Gullen