JavaScript 移動動畫

■知識點

移動動畫主要通過動態(tài)修改元素的坐標來實現(xiàn)。技術要點如下。

    考慮元素的初始坐標、終點坐標以及移動坐標等定位要素。

    移動速度、頻率等問題?？梢越柚〞r器來實現(xiàn)，但效果的模擬涉及算法問題，不同的算法，可能會設計出不同的移動效果，如勻速運動、加速和減速運動。

■實例設計

    下面的示例演示了如何設計一個簡單的元素滑動效果。通過指向元素、移動的位置以及移動的步數(shù)，可以設計按一定的速度把元素從當前位置移動指定的位置。本示例引用前面介紹的getB()方法，該方法能夠獲取當前元素的絕對定位坐標值。

//簡單的移動函數(shù)

//參數(shù)：e表示元素，x和y表示要移動的終點坐標，t表示元素移動的步數(shù) 

function slide(e, x, y, t){

    var t = t || 100                  //初始化步數(shù)，步數(shù)越大，速度越慢，移動越逼真

    var o = getB(e);                  //當前元素的絕對定位坐標值

    var x0 = o.x; 

    var yO = o.y;

    var stepx = Math.round((x - x0) / t);

    //計算x軸每次移動的步長，由于像素點不可用小數(shù)，所以會存在一定的誤差

    var stepy = Nath.round((y - y0) / t)；         //計算y軸每次移動的步長

    var out = setlnterval(function (){                 //設計定時器

        var o = getB (e);                                       //獲取每次移動后的絕對定位坐標值

        var xO = o.x; 

        var yO = o.y;                

        e.style["left"] = (xO + stepx) + px';           //定位每次移動的位置

        e.style [,ftopn] = (yO + stepy) + px';        //定位每次移動的位置

        //如果距離終點距離小于步長，則停止循環(huán)，并校正最終坐標位置

        if (Math.abs(x - xO) <= Math.abs(stepx) ||  Math.abs(y - yO) <= Math.abs(stepy)){

            e.style["left"] = x + 'px';

            e.style["top"] = y + 'px1;

            clearTimeout(out);

        };

    }, 2)

};

    使用時應該定義元素絕對定位或相對定位顯示狀態(tài)，否則移動無效。在網(wǎng)頁動畫設計中，一般都使用這種定位移動的方式來實現(xiàn)。

<style type="text/css">

.block {width:20px; height:20px; position:absolute; left:200px; 

top:200px; background-color:red; }

</style>

<div class="block" id="blockl"></div>

<script>

tempi = document.getElementByld('blockl');

slide(tempi, 400, 400,60);

</script>