JavaScript 移動動畫
■知識點
移動動畫主要通過動態(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>
點擊加載更多評論>>