DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 淺談Javascript中勻速運動的停止條件
淺談Javascript中勻速運動的停止條件
編輯:JavaScript基礎知識     

我們先來看下之前的勻速運動的代碼,修改了速度speed後會出現怎麼樣的一個bug。這裡加了兩個標桿用於測試

復制代碼 代碼如下:
<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;
                    }
                    // 其實這種情況是有問題的
                    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>

其實這樣的代碼如果把速度改成7這種奇數,而到達目標點卻是一個整數,這樣就會出現未能達目標點或超過目標點來回抖動的bug

那為什麼會出現這種情況呢 ?

實際上來說他到達目標點的時候無法精確到目標點,若目標點是100,每次走7個,這個時候他要麼就是過了目標點,要麼就是沒過。

永遠到不了目標點。其實幫之前的緩沖有點像。

那麼到底怎麼算才是到達了目標點呢?

舉個例子 : 你打車到某個地方,司機肯定是到哪裡差不多離個10米20米就停下來了,就算到了。不可能要求汽車貼到那個地方停下來吧。

所以說呢,其實來講程序也是一樣的,我們只要物體和目標點之間的距離近到一定的程度,就不需要再近了,就認為到了。

我們看下修改後的代碼:

復制代碼 代碼如下:
<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;
                    }
                    if (Math.abs(iTarget - oDiv.offsetLeft) <= 7) {
                        clearInterval(time);
                        oDiv.style.left=iTarget+'px';
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    }
                   
                }, 30)
            }
        </script>

解釋一下: 這裡為什麼要用 Math.abs 取絕對值呢?

理由很簡單,因為速度可能是正的可能是負的。

現在我們讓目標和物體之間的距離只要小於等7, 那就算到了。為什麼是7呢? 因為他下一次的運動都不足7個了。這個時候我們就算他到了目標點了。

那現在問題又來了, 這樣寫 他並沒有精確的停在目標點的位置。所以我們加了一句簡單的話,直接讓left 等於目標點。oDiv.style.left=iTarget+'px';

實際上最後一次走的不足7個,但是大家都知道程序這個運行的太快了,人眼是看不出來的。熱烈的笑臉

這個時候就沒有問題了。眨眼

這個就是勻速運動的停止條件。 那有朋友問,為什麼緩沖運動沒有這麼麻煩呢?

因為他的速度是變的,越來越小,直到最後他甚至就到達1了,一步一步往前肯定不會出現這樣的問題。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved