在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等。