Javascript 双三次贝塞尔曲线上的滚动速度
这个网站:有一个非常有趣的滚动行为。你在幻灯片(屏幕)之间移动,感觉就像在幻灯片之间快速滚动。但事实上,该网站不断滚动,但基于双三次贝塞尔曲线(我查看了它们的缩小代码),使用CSS 3D转换的幻灯片移动速度越来越慢Javascript 双三次贝塞尔曲线上的滚动速度,javascript,math,scrollmagic,Javascript,Math,Scrollmagic,这个网站:有一个非常有趣的滚动行为。你在幻灯片(屏幕)之间移动,感觉就像在幻灯片之间快速滚动。但事实上,该网站不断滚动,但基于双三次贝塞尔曲线(我查看了它们的缩小代码),使用CSS 3D转换的幻灯片移动速度越来越慢 因为我不是数学和贝塞尔曲线方面的专家,所以我很难实现这一点。我想知道是否有人能帮我,让我知道这件事。谢谢。我想你需要一些近似曲线。让我们为每个页面(屏幕)构建一对曲线 给定值:ScreenSize,MaxSpeed时刻h=0和h=ScreenSize,MinSpeed时刻h=Scr
因为我不是数学和贝塞尔曲线方面的专家,所以我很难实现这一点。我想知道是否有人能帮我,让我知道这件事。谢谢。我想你需要一些近似曲线。让我们为每个页面(屏幕)构建一对曲线 给定值:
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
等移动