在bicubic bezier曲线上滚动

Question

本网站：https://gladeye.com/有一个非常有趣的滚动行为。您可以在幻灯片（屏幕）之间移动，感觉就像从幻灯片移动到幻灯片的快速滚动。但事实上，该网站不断滚动，但基于双三次Bezier曲线（我看着他们的缩小代码），使用CSS 3D转换更慢更快地移动幻灯片。

因为我不是在数学和贝塞尔曲线的专家，我有一个很难实现这一点。我想知道是否有人能够帮助我，并且让我对此有所领悟。谢谢。

Answer 1

我认为你需要一些近似曲线。让我们为每个页面（屏幕）构建一对曲线。

给定的值：ScreenSize，MaxSpeed在时刻h = 0和h = ScreenSize，MinSpeed在此刻h = ScreenSize/2

我们建立两（镜像）贝塞尔曲线。
控制点：

first curve 
P[0] = (0, MaxSpeed) 
P[1] = (A, MaxSpeed) 
P[2] = (ScreenSize/2 - 3 * A, MinSpeed) 
P[3] = (ScreenSize/2, MinSpeed) 
second curve 
P[0] = (ScreenSize/2, MinSpeed) 
P[1] = (ScreenSize/2 + 3 * A, MinSpeed) 
P[2] = (ScreenSize - A, MaxSpeed) 
P[3] = (ScreenSize, MaxSpeed) 

播放与参数A（它是粗糙的屏幕尺寸/ 10），并用系数3以实现所需的形式。

下一屏幕的曲线移动ScreenSize,2*ScreenSize等。