如何使用贝塞尔曲线控制动画的速度? [英] how to control the speed of animation, using a Bezier curve?

问题描述

我只找到了有助于描绘(建立矢量图像)的三次曲线矢量坐标的公式.

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

这里是:

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

• 更多信息，请访问: http://www. ams.org/samplings/feature-column/fcarc-bezier#sthash.85XhcT7H.dpuf
• 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.

推荐答案

贝塞尔曲线是从线性空间(通常在区间<0,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)

操作方法:

我认为有很多方法可以完成:

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)是动画项目的位置
t是动画时间<0,t_duration>
t_duration是到达边缘位置所需的时间
x0,x1是开始/结束位置


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;

并使用u而不是t，您将获得相同的结果...要清楚，在Bezier内部将时间转换为范围<0,1>，然后返回到<0,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.

这篇关于如何使用贝塞尔曲线控制动画的速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！