从开始位置滚动到结束位置,距离固定已知,时间固定已知,那么就只是一个简单的两个方程式,一个斜率固定(直线方程),一个斜率不固定(一元二次方程,抛物线)。斜率也就是速度
斜率固定,也就是速度固定
//从开始的位置移动到结束的位置(匀速)
function startRollToEnd(end=0,time = 100){
let timer;
//获取当前毫秒数
let startTime = +new Date();
let start = document.documentElement.scrollTop || document.body.scrollTop; //初始位置
//获取从开始到结束需要滚动的长度
let lengthY = start - end;
timer = requestAnimationFrame(function func(){
//获取下一帧的时间距离开始的时间,以此计算此时的位置,如果超过了预计的时间,则就等于参数所规定的时间
let timeX = time - Math.max(0,startTime - (+new Date()) + time);
document.documentElement.scrollTop = document.body.scrollTop = timeX * (-lengthY) / time + start;
timer = requestAnimationFrame(func);
//如果距离开始时间已经到了规定的时间则不用在执行了
if(timeX == time){
cancelAnimationFrame(timer);
}
});
}
斜率不固定(斜率从最大变为最小)
function startRollToEndTwo(end=0,time = 100){ //变速(匀减速)
let timer;
//获取当前毫秒数
let startTime = +new Date();
let start = document.documentElement.scrollTop || document.body.scrollTop; //初始位置
//获取从开始到结束需要滚动的长度
let length = start - end;
//假设时间(x)与距离(y)成立xy坐标轴,要想变速那么时间与距离之间的关系:a*x^2 + b*x = y
//已知两个坐标点,求解ab常量
const [x1,y1,x2,y2] = [time,length,time*2,0];
let a = (y1/x1 - y2/x2)/(x1 - x2);
let b = (y1-a*Math.pow(x1,2))/x1;
timer = requestAnimationFrame(function func(){
//获取下一帧的时间距离开始的时间,以此计算此时的位置,如果超过了预计的时间,则就等于参数所规定的时间
let timeX = time - Math.max(0,startTime - (+new Date()) + time);
let lengthY = a*Math.pow(timeX,2) + b*timeX;
document.documentElement.scrollTop = document.body.scrollTop = -lengthY + start;
timer = requestAnimationFrame(func);
//如果距离开始时间已经到了规定的时间则不用在执行了
if(timeX == time){
cancelAnimationFrame(timer);
}
});
}
使用方法
startRollToEnd(<滚动条要到达的位置>,<滚动时间>);
代码基本加了注释,很好理解哟。