cubic-bezier,如何得到x的y?

时间:2013-01-22 17:53:30

标签: javascript math

我的cubic-bezier函数由[0.1,0.8,0.2,1] [x1,y1,x2,y2]

定义

我在1200毫秒的时间内旋转元素720deg。如何计算每60度t?即,当对象转为60, 120, 180, 240, 300, 360, 420, 480, 540, 600, 660, 720度时,我需要触发JavaScript事件。

如果我没弄错的话,我需要得到y为(60/720), (60/720)*2, (60/720)*3, (60/720)*4, (60/720)*5, (60/720)*6, (60/720)*7, (60/720)*8, (60/720)*9, (60/720)*10, (60/720)*11, (60/720)*12的每个x值,然后乘以x *持续时间(1200ms)。

我查看了http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/以及https://github.com/arian/cubic-bezier实施。

如果到目前为止所有内容都是正确的,我如何获得y的x值?

1 个答案:

答案 0 :(得分:1)

首先,你所拥有的不是贝塞尔样条,而是easing curve:立方贝塞尔样条的特殊情况,起点为(0.0,0.0)和终点(1.0,1.0),用于生成动画。

如果您使用相等的时间间隔而不是等角度旋转间隔,那么您的动画看起来会更好。 t本质上是一个时间参数,因此曲线由

给出
y(t) = 3*(1-t)^2*t*y1 + 3*(1-t)*t^2*y2 + t^3.

其中t属于区间[0.0,1.0]

然后实际角度为

α(t) = 720 * y(T/1200)
     = 720 * (2.4*(1-T/1200)^2*(T/1200) + 3*(1-T/1200)*(T/1200)^2 + (/1200)^3)

其中T是以毫秒为单位的时间。