缓冲运动

1.实现缓冲运动：

逐渐变慢，最后停止
距离越远速度越大

速度由距离决定

速度=（目标值-当前值）/缩放系数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:100px;
            height:100px;
            background:red;
            position:absolute;
            left:600px;
            top:40px;
        }
        span{
            width:1px;
            height:300px;
            position:absolute;
            left:300px;
            background:black;
        }
    </style>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById("btn");
            oBtn.onclick=function(){
                move(300);
            }
        }
        function move(target){
            var timer=null;
            var oDiv=document.getElementById("div1");
            var speed=0;
            clearInterval(timer);
           timer=setInterval(function(){
               speed=(target-oDiv.offsetLeft)/8;
               if(speed>0){
                   speed=Math.ceil(speed);
               }else{
                   speed=Math.floor(speed);
               }
               if(oDiv.offsetLeft==target){
                   clearInterval(timer);
               }else{
                   oDiv.style.left=oDiv.offsetLeft+speed+"px";
               }
           },30)
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="运动">
<div id="div1"></div>
<span></span>
</body>
</html>

缓冲菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:100px;
            height:100px;
            background:red;
            position:absolute;
            right:0;
        }
    </style>
    <script>
//功能：实现div跟随着屏幕做缓冲运动，实现思路：通过滚动条+（屏幕可视区-div的自身的高度）/2，速度设置可以改变
        window.onscroll=function(){
            var oDiv=document.getElementById("div1");
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//            oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";
            var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;//这里的小数会造成bug
            startMove(parseInt(t));//这里的小数如果不取整，会造成div上下抖动
        }
        var timer=null;
        function startMove(target){
            var oDiv=document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=(target-oDiv.offsetTop)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetTop==target){
                    clearInterval(timer);
                }else{
                    oDiv.style.top=oDiv.offsetTop+speed+"px";
                }
            },30)
        }
    </script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

匀速运动的改进：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:100px;
            height:100px;
            background:red;
            position:absolute;
            left:500px;
            top:40px;
        }
        span{
            width:1px;
            height:300px;
            background:black;
            position:absolute;
            left:300px;
        }
    </style>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById("btn");
            oBtn.onclick=function(){
                move(300);
            }
        }
        var timer=null;
        function move(target){
            var oDiv=document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(oDiv.offsetLeft<target){
                    speed=7;
                }else{
                    speed=-7;
                }
                if(Math.abs(oDiv.offsetLeft-target)<7){ //是否到达终点
                    clearInterval(timer);
                    oDiv.style.left=target+"px";
                }else{
                    oDiv.style.left=oDiv.offsetLeft+speed+'px';
                }
            },30)
        }
    </script>
</head>
<body>
<input type="button" value="运动" id="btn">
<div id="div1"></div>
<span></span>
</body>
</html>

总结：运动终止条件

匀速运动：距离足够近

缓冲运动：两点重合

猜你喜欢