js运动基础2 右侧悬浮框缓冲运动匀速运动的停止条件

程序员文章站 2022-06-01 11:29:00

...

缓冲运动：

逐渐变慢，最后停止
距离越远速度越大（速度由距离决定速度=（目标值-当前值）/缩放系数）
例子：缓冲菜单（Bug:速度取整）

缓冲运动：随着距离减小，速度也越来越小。用除数控制速度。速度用整数。

oDiv.offsetTop  //滚动条滚动的距离+窗口距离-物体宽度

<style>
   #div1{
       width: 100px;
       height: 100px;
       background: red;
       position: absolute;
       left: 0;
       top: 50px;
   }
</style>
<script>
    function startMove(){

        var oBtn=document.getElementById('btn');
        var oDiv=document.getElementById('div1');
        setInterval(function(){
            //遵循逐渐变慢的原则，如果是300-oDiv.offsetLeft，那么一开始的速度太大，一下子就跑到300px处了。
            //要控制缓冲的快慢，就直接控制除数。改为4变快
            var speed=(300-oDiv.offsetLeft)/10;
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
        },30);
    }
</script>
<body>
<input type="button" id="btn" value="开始运动" onclick="startMove()"/>
<div id="div1"></div>
</body>

出现的问题：

<script>
    function startMove(){

        var oBtn=document.getElementById('btn');
        var oDiv=document.getElementById('div1');
        setInterval(function(){
            var speed=(300-oDiv.offsetLeft)/10;
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
            document.title=oDiv.offsetLeft+" "+speed;
        },30);
    }
</script>

js运动基础2 右侧悬浮框缓冲运动匀速运动的停止条件

距离到296 速度到0.4就停下了。

计算机所能接受到最小单位为px,290.5px计算机会默认为290px,并且不会四舍五入。

oDiv.style.left=oDiv.offsetLeft+speed+"px";   oDiv.offsetLeft为296px speed为0.4   oDiv.style.left为296.4---296

速度不能是小数。

我们给speed做一个向上取整。

<script>
    function startMove(){

        var oBtn=document.getElementById('btn');
        var oDiv=document.getElementById('div1');
        setInterval(function(){
            var speed=(300-oDiv.offsetLeft)/10;
            speed=Math.ceil(speed);
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
            document.title=oDiv.offsetLeft+" "+speed;
        },30);
    }
</script>

但凡我们遇到缓冲运动，我们都要取整数。

缓冲菜单：右侧悬浮框。

 <style>
        #div1{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
        window.onscroll=function(){
            var oDiv=document.getElementById('div1');
            //scrollTop 起始位置到末位置的滑动高度,获取滚动条的位置。
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            //documentElement.clientHeight 页面可视区宽高
            oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'
        }
    </script>
</head>
<body style="height: 2000px;">

<div id="div1"></div>
</body>

但是div会在这儿抖一抖的。我们让运动让它缓缓地过去。

 <style>
        #div1{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
        window.onscroll=function(){
            var oDiv=document.getElementById('div1');
            //scrollTop 起始位置到末位置的滑动高度,获取滚动条的位置。
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            //documentElement.clientHeight 页面可视区宽高
           // oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'
            startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
        }


        var timer=null;
        function startMove(iTarget){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=(iTarget-oDiv.offsetTop)/4;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetTop==iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.top = oDiv.offsetTop + speed + 'px';
                }
            },30);
        }
    </script>
</head>
<body style="height: 2000px;">

<div id="div1"></div>
</body>

对联悬浮框：悬浮框在中间的位置。bug:速度取整。

潜在问题：目标值不是整数时。

js运动基础2 右侧悬浮框缓冲运动匀速运动的停止条件

  oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'

  startMove((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop);

<style>
        #div1{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
        window.onscroll=function(){
            var oDiv=document.getElementById('div1');
            //scrollTop 起始位置到末位置的滑动高度,获取滚动条的位置。
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            //documentElement.clientHeight 页面可视区宽高
           // oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'
            //(document.documentElement.clientHeight-oDiv.offsetHeight)/2 有可能出现小数，物体上下来回跳动，所以我们取整
            startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
        }


        var timer=null;
        function startMove(iTarget){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=(iTarget-oDiv.offsetTop)/4;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetTop==iTarget){
                    clearInterval(timer);
                }else{
                    document.getElementById('txt1').value=oDiv.offsetTop;
                    oDiv.style.top = oDiv.offsetTop + speed + 'px';

                }
            },30);
        }
    </script>
</head>
<body style="height: 2000px;">
<input type="text" id="txt1" style="position: fixed; right: 0;top: 0"/>
<div id="div1"></div>
</body>

匀速运动的停止条件：

运动终止条件
匀速运动：距离足够近
缓冲运动：两点重合

Math.abs()取绝对值。

            if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
                clearInterval(timer);
                oDiv.style.left=iTarget='px';
            }else{
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
            }

<style>
   
   #div1{
       width: 100px;
       height: 100px;
       background: red;
       position: absolute;
       left: 600px;
       top: 50px;
   }
    #div2{
        width: 1px;
        height: 300px;
        background: black;
        position: absolute;
        left: 300px;
        top: 0;
    }
   #div3{
       width: 1px;
       height: 300px;
       background: black;
       position: absolute;
       left: 100px;
       top: 0;
   }
</style>
<script>
    var timer=null;
    function startMove(iTarget){
        /*到100和到300，speed为7每次加7到不了100或300，所以快到100或300会来回颤抖。*/

        var oDiv=document.getElementById('div1');
        clearInterval(timer);
        timer= setInterval(function(){
            var speed=0;
            //var iSpeed=iTarget-oDiv.offsetLeft>0?7:-7;
            if(oDiv.offsetLeft<iTarget){
                speed=7;
            }else{
                speed=-7;
            }
            if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
                clearInterval(timer);
                oDiv.style.left=iTarget+'px';
            }else{
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
            }

        },30);

    }
</script>
<body>
<input type="button"  value="到100" onclick="startMove(100)"/>
<input type="button"  value="到300" onclick="startMove(300)"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

相关标签：右侧悬浮框缓冲运动

上一篇： xamarin学习笔记B07(ios的UITableView)

下一篇：数据结构——栈篇（利用模板生成栈的模板类）

js运动基础2 右侧悬浮框 缓冲运动 匀速运动的停止条件

js运动基础2 右侧悬浮框 缓冲运动 匀速运动的停止条件

js运动基础2 右侧悬浮框缓冲运动匀速运动的停止条件

js运动基础2 右侧悬浮框缓冲运动匀速运动的停止条件