eNUaMD6xl

23朵毒蘑菇

js,页面从开始位置滚动到结束位置,固定时间下匀速滚动和变速滚动。

原文章迁移

js

2021-03-19 10:58:06 已有版本 1 个 show:0.53kTYPE: blog

从开始位置滚动到结束位置,距离固定已知,时间固定已知,那么就只是一个简单的两个方程式,一个斜率固定(直线方程),一个斜率不固定(一元二次方程,抛物线)。斜率也就是速度

斜率固定,也就是速度固定

//从开始的位置移动到结束的位置(匀速)
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(<滚动条要到达的位置>,<滚动时间>);

代码基本加了注释,很好理解哟。