JavaScript 移動(dòng)動(dòng)畫

■知識(shí)點(diǎn)

移動(dòng)動(dòng)畫主要通過動(dòng)態(tài)修改元素的坐標(biāo)來實(shí)現(xiàn)。技術(shù)要點(diǎn)如下。

    考慮元素的初始坐標(biāo)、終點(diǎn)坐標(biāo)以及移動(dòng)坐標(biāo)等定位要素。

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

■實(shí)例設(shè)計(jì)

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

//簡(jiǎn)單的移動(dòng)函數(shù)

//參數(shù)：e表示元素，x和y表示要移動(dòng)的終點(diǎn)坐標(biāo)，t表示元素移動(dòng)的步數(shù) 

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

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

    var o = getB(e);                  //當(dāng)前元素的絕對(duì)定位坐標(biāo)值

    var x0 = o.x; 

    var yO = o.y;

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

    //計(jì)算x軸每次移動(dòng)的步長(zhǎng)，由于像素點(diǎn)不可用小數(shù)，所以會(huì)存在一定的誤差

    var stepy = Nath.round((y - y0) / t)；         //計(jì)算y軸每次移動(dòng)的步長(zhǎng)

    var out = setlnterval(function (){                 //設(shè)計(jì)定時(shí)器

        var o = getB (e);                                       //獲取每次移動(dòng)后的絕對(duì)定位坐標(biāo)值

        var xO = o.x; 

        var yO = o.y;                

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

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

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

        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)

};

    使用時(shí)應(yīng)該定義元素絕對(duì)定位或相對(duì)定位顯示狀態(tài)，否則移動(dòng)無效。在網(wǎng)頁動(dòng)畫設(shè)計(jì)中，一般都使用這種定位移動(dòng)的方式來實(shí)現(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>