how to control the speed of animation, using a Bezier curve?

Question

I found formula only for vector coordinates of cubic curve who help in depicts(build vector image).

Here it is:

B(t) = (1-t)^3*P0 + 3*t*(1-t)^2*P1 + 3*t^2*(1-t)*P2 + t^3*P3

• See more at: http://www.ams.org/samplings/feature-column/fcarc-bezier#sthash.85XhcT7H.dpuf

This formula returns the coordinates of the vector, but I can not understand how they can influence the speed of the animation, as in http://cubic-bezier.com/#.17,.67,.83,.67.

Please, direct me to the right way so that I could understand.

Answer 1

bezier curve is a mapping from linear space (usually on interval <0,1>) to nonlinear space. This means you can use it for shape distortion of any signal/value. In your case is not affected time but speed (first derivation of position)

How to do it:

There are many approaches I think that one is done:

If control points of bezier are evenly distributed along the path then the movement is linear. When they are more dense there is the speed slower and vice versa. If you need more complicated movement add more points/bezier patches.

Another option is make the movement linear but not the time

x(t) = x0 + (x1-x0)*t/t_duration;
x(t) is animated item position
t is animation time <0,t_duration>
t_duration is time needed to get to edge position
x0,x1 are start/end positions

now if you increment the time in timer linearly then movement is linear if you do this instead:

u=Bezier(t/t_duration)*t_duration;

and use u instead of t then you achieve the same ... To be clear inside Bezier is time converted to range <0,1> and after back to <0,t_duration>

[notes]

The second option (discrete nonlinear time) brings a whole world of new math problems.

But I use it a lot in advanced motion control and planing. You can achieve nasty things in there that are almost impossible in standard time space with very small complexity instead. But the draw back is that the simple things in classical time space are very hard to do there.