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

你。 提交于 2020-01-16 02:50:47

问题


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.


回答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.



来源:https://stackoverflow.com/questions/27114444/how-to-control-the-speed-of-animation-using-a-bezier-curve

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!