2

我的三次贝塞尔函数由[0.1,0.8,0.2,1]where定义[x1,y1,x2,y2]。

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

如果我没记错的话，我需要得到 y 所在的每个 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*duration (1200ms)。

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

如果到目前为止一切都是正确的，我如何获得 y 的 x 值？

4

1 回答 1

1

首先，你所拥有的不是贝塞尔样条，而是一条缓动曲线：三次贝塞尔样条的特殊情况，起点在 (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，以毫秒为单位。

于 2013-02-08T21:40:00.810 回答