位置:首頁 > 軟件操作教程 > 編程開發(fā) > JavaScript > 問題詳情

JavaScript 移動動畫

提問人:劉團(tuán)圓發(fā)布時間:2020-11-27

■知識點

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

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

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

■實例設(shè)計

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

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

//參數(shù):e表示元素,x和y表示要移動的終點坐標(biāo),t表示元素移動的步數(shù) 

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

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

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

    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 (){                 //設(shè)計定時器

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

        var xO = o.x; 

        var yO = o.y;                

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

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

        //如果距離終點距離小于步長,則停止循環(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)

};

    使用時應(yīng)該定義元素絕對定位或相對定位顯示狀態(tài),否則移動無效。在網(wǎ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>

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部