gpt4 book ai didi

javascript - cubic-bezier,如何为 y 获取 x?

转载 作者:行者123 更新时间:2023-11-30 05:51:38 40 4
gpt4 key购买 nike

我的三次贝塞尔函数由 [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 事件。

如果我没记错的话,我需要获取 y 为 (60/720), (60/720)*2, (60/720)*3, (60/720)* 的每个 x 值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 值?

最佳答案

首先,您拥有的不是贝塞尔样条曲线,而是 easing curve : 用于制作动画的起点在 (0.0,0.0) 终点在 (1.0,1.0) 的三次贝塞尔样条的特例。

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

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

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

那么实际的 Angular 就是

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

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

关于javascript - cubic-bezier,如何为 y 获取 x?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14464955/

40 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com