快捷導(dǎo)航

淺談Javascript中勻速運(yùn)動(dòng)的停止條件

更新時(shí)間：2014年12月19日 16:30:15 投稿：hebedich

這篇文章主要給我們探討了Javascript中勻速運(yùn)動(dòng)的停止條件的原理及其與緩沖運(yùn)動(dòng)的區(qū)別,需要的朋友可以參考下

我們先來(lái)看下之前的勻速運(yùn)動(dòng)的代碼，修改了速度speed后會(huì)出現(xiàn)怎么樣的一個(gè)bug。這里加了兩個(gè)標(biāo)桿用于測(cè)試

<style type="text/css">

            #div1 {

                width: 100px;

                height: 100px;

                position: absolute;

                background: red;

                top: 50px;

                left: 600px;

            }

            #div2 {

                width: 1px;

                height: 300px;

                position: absolute;

                left: 300px;

                top: 0;

                background: black;

            }

            #div3 {

                width: 1px;

                height: 300px;

                position: absolute;

                left: 100px;

                top: 0;

                background: black;

            }

        </style>

        <script type="text/javascript">

            var time = null;

            function startMove(iTarget) {

                var oDiv = document.getElementById("div1");

                clearInterval(time);

                time = setInterval(function() {

                    var speed = 0;

                    if (oDiv.offsetLeft < iTarget) {

                        speed = 7;

                    } else {

                        speed = -7;

                    }

                    // 其實(shí)這種情況是有問(wèn)題的

                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                }, 30)

            }

        </script>

    </head>

    <body>

        <input type="button" id="btn" value="到100" onclick="startMove(100)" />

        <input type="button" id="btn" value="到300" onclick="startMove(300)" />

        <div id="div1">

        </div>

        <div id="div2">

        </div>

        <div id="div3">

        </div>

    </body>

其實(shí)這樣的代碼如果把速度改成7這種奇數(shù)，而到達(dá)目標(biāo)點(diǎn)卻是一個(gè)整數(shù)，這樣就會(huì)出現(xiàn)未能達(dá)目標(biāo)點(diǎn)或超過(guò)目標(biāo)點(diǎn)來(lái)回抖動(dòng)的bug

那為什么會(huì)出現(xiàn)這種情況呢？

實(shí)際上來(lái)說(shuō)他到達(dá)目標(biāo)點(diǎn)的時(shí)候無(wú)法精確到目標(biāo)點(diǎn)，若目標(biāo)點(diǎn)是100，每次走7個(gè)，這個(gè)時(shí)候他要么就是過(guò)了目標(biāo)點(diǎn)，要么就是沒(méi)過(guò)。

永遠(yuǎn)到不了目標(biāo)點(diǎn)。其實(shí)幫之前的緩沖有點(diǎn)像。

那么到底怎么算才是到達(dá)了目標(biāo)點(diǎn)呢？

舉個(gè)例子：你打車(chē)到某個(gè)地方，司機(jī)肯定是到哪里差不多離個(gè)10米20米就停下來(lái)了，就算到了。不可能要求汽車(chē)貼到那個(gè)地方停下來(lái)吧。

所以說(shuō)呢，其實(shí)來(lái)講程序也是一樣的，我們只要物體和目標(biāo)點(diǎn)之間的距離近到一定的程度，就不需要再近了，就認(rèn)為到了。

我們看下修改后的代碼：

復(fù)制代碼代碼如下: