基于曲线/方程/公式的涡旋持续时间修正
基于曲线/方程/公式的涡旋持续时间修正
提问于 2017-06-09 18:22:25
我需要滚动到顶部，并希望修改滚动的持续时间，根据在滚动之前，视图在文档下的距离。随着滚动长度的增加，我想添加更小的时间增量。所以我很难计算出如何把曲线应用到一个数字上，一个我假设的方程。我的数学生疏了。
举个例子，我如何做这样的事情：
0 to 1000 pixels -> 300 (+300)
1001 to 2000 -> 500 (+200)
2001 to 3000 -> 700 (+200)
3001 to 4000 -> 800 (+100)
4001 to 5000 -> 900 (+100)然后继续添加每1000个像素100的增量。或者一条曲线，一旦到了点，每1000条曲线就会增加100倍。
我知道我可以用if/else if语句来完成上面的工作，但为了简洁起见，我希望用数学来完成，这样就更容易处理这些值了。
很抱歉，因为我确信这些信息已经存在于其他地方，但我不知道如何用短语搜索来找到我正在寻找的答案。只要一个指向正确类型的数学或教程就足够了，但当然，一个更详细的答案也会受到欢迎。
我也会感兴趣的任何意见，什么会觉得更自然的这个特殊的用例。我试过：
var duration = Math.ceil ( $('html').scrollTop() / 1000 ) * 300;但是对于更远的距离来说，感觉太慢了。
更新
关于if/else if选项，我想出了下面的伪代码，它使用if/else if，但具有一定的灵活性，非常紧凑。我仍然希望用一些数学来替换if/else if语句。
num = scrollTop
duration = 0
while ( num > 0 ) {
a = Math.ceil(num/1000)
if ( a >= 4 ) {
duration += 100
} else if ( a >= 2 ) {
duration += 200
} else {
duration += 300
}
num -= 1000
}更新2
我已经实现了这一点，而不是一个更好的解决方案，以下是JS：
var num = $('html').scrollTop();
var duration = 0;
while ( num > 0 ) {
var a = Math.ceil(num/1000);
if ( a >= 4 ) {
duration += 100;
} else if ( a >= 2 ) {
duration += 200;
} else {
duration += 300;
}
num -= 1000;
}回答 1
Stack Overflow用户
发布于 2017-06-09 19:02:12
癫痫警报！
您可以使用对requestAnimationFrame的“递归”调用，并在其中更改一个值以控制滚动速度。
例子：
恒速与恒定加速度：
var speed = 3;
var position = 2000;
var acceleration = 1.3;
window.scrollTo(0, position);
scrollToTopAnimated();
function scrollToTopAnimated() {
requestAnimationFrame((delta) => {
var deltaSec = delta / 1000;
speed += acceleration * deltaSec;
position -= speed * deltaSec;
window.scrollTo(0, position);
if (position > 0)
scrollToTopAnimated();
})
}body {
height: 2000px;
width: 100%;
background-image: linear-gradient(to bottom, red, yellow, green, blue, red, yellow, green, blue);
}<h1> Hello World </h1>
或以正弦波作为加速度：
var speed = 2;
var position = 2000;
var posOnSin = 0;
var sinSpeed = Math.PI;
window.scrollTo(0, position);
scrollToTopAnimated();
function scrollToTopAnimated() {
requestAnimationFrame((delta) => {
var deltaSec = delta / 1000;
position -= speed * deltaSec + Math.sin(posOnSin) * deltaSec * 2;
posOnSin += sinSpeed * deltaSec;
window.scrollTo(0, position);
if (position > 0)
scrollToTopAnimated();
})
}body {
height: 2000px;
width: 100%;
background-image: linear-gradient(to bottom, red, yellow, green, blue, red, yellow, green, blue);
}<h1> Hello World </h1>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44464469
复制相关文章
相似问题
腾讯云开发者
