Javascript 三次贝塞尔,如何用x换y?
我的立方贝塞尔函数由Javascript 三次贝塞尔,如何用x换y?,javascript,math,Javascript,Math,我的立方贝塞尔函数由[0.1,0.8,0.2,1]定义,其中[x1,y1,x2,y2] 我正在1200毫秒的时间内将元件旋转720度。如何计算每60度的t?也就是说,我需要在对象转动60、120、180、240、300、360、420、480、540、600、660、720度时触发JavaScript事件 如果我没有弄错的话,我需要得到每个x值,其中y是(60/720),(60/720)*2,(60/720)*3,(60/720)*4,(60/720)*5,(60/720)*6,(60/720)
[0.1,0.8,0.2,1]
定义,其中[x1,y1,x2,y2]
我正在1200毫秒的时间内将元件旋转720度。如何计算每60度的t
?也就是说,我需要在对象转动60、120、180、240、300、360、420、480、540、600、660、720度时触发JavaScript事件
如果我没有弄错的话,我需要得到每个x值,其中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*持续时间(1200ms)
我已经研究了这些方法和实现
如果到目前为止一切都是正确的,那么如何获得y的x值呢?首先,您拥有的不是贝塞尔样条曲线,而是一种特殊情况:三次贝塞尔样条曲线的起点为(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
是以毫秒为单位的时间。三次贝塞尔曲线不是由四个数字定义的,而是由四个点定义的(除非隐含了[0,0]
和[1,1]
),它是由两个点定义的,我已经给出了[x1,y1]
和[x2,y2]
[0,0]
和[1,1]
正如您所指出的是隐含的。那么,您想要四点定义的立方函数的逆吗?@JanDvorak听起来很像。从键中查找立方的系数应该很容易。要找到三次函数的零点,可以使用精确公式或牛顿迭代算法。