[英]cubic-bezier, how to get x for y?
我的三次[0.1,0.8,0.2,1]
函数由[0.1,0.8,0.2,1]
定义,其中[x1,y1,x2,y2]
。
我将在1200ms的时间内旋转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值(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)。
我看过http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/以及https://github.com/arian / cubic-bezier实现。
如果到目前为止一切正确,如何获得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
是时间(以毫秒为单位)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.