js加减速运动详解

时间：5年前阅读：4921

加减速运动是加速运动和减速运动的结合。前半段运动时，做加速运动。到达指定点时，做减速运动，最终到达终点停止

　　step = 0.02(v0+a*(0.02n+0.01)) = 2/10000(100*v0+a(2n+1))

　　假设v0=0，最终速度v=100，距离s = 200

　　所以a = v*v/(2*s) = 5000/s = 25

　　则加速运动的step = (2n+1)/s =(2n+1)/200

　　在加速运动中，s=1/2*a*t*t;

　　所以加速运动总时间t = s/50 = 4，定时器运行次数n = t/0.02=200次

　　减速运动的step=0.02(v0-(2n+1))，此时的v0相应于加速运动结束时的瞬时速度100，a= -5000/s = -25

　　所以，减速运动的step=2-(2n+1)/s = 2-(2n+1)/200

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;"></div>
<div style="background-color:blue;width:1px;height:100px;position:absolute;left:200px;"></div>
<div style="background-color:red;width:1px;height:100px;position:absolute;left:400px;"></div>
<script>
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}  
reset.onclick = function(){history.go();}
btn.onclick = function(){
    //声明定时器运行次数
    var index=-1;
    //声明步长值step
    var step;
    //声明当前值cur
    var cur;
    //声明目标值
    var target = parseFloat('400px');
    clearInterval(test.timer);
    test.timer = setInterval(function(){
        //更新定时器的工作次数
        index++;
        //当index为200时，说明进行完一次运动，则将index置0
        if(index == 200){
            index = 0;
        };     
        //更新当前值
        cur = parseFloat(getCSS(test,'left'));
        //更新步长值
        //加速运动
        if(cur < 200){
            step =(2*index+1)/(target/2);    
        }else{
        //减速运动
            step = 2-(2*index+1)/(target/2);
        }
        //若步长设置值使得元素超过目标点时，将步长设置值更改为目标点值 - 当前值
        if((cur+step-target)*step>0){
            step = target - cur;
        }
        //更新left值
        test.style.left = cur + step + 'px';
        //当元素到达目标点时，停止定时器
        if(step == target - cur){
            clearInterval(test.timer);
        }    
    },20);
}
</script>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

js加减速运动详解

网友评论