JavaScript 移动动画
■知识点
移动动画主要通过动态修改元素的坐标来实现。技术要点如下。
考虑元素的初始坐标、终点坐标以及移动坐标等定位要素。
移动速度、频率等问题。可以借助定时器来实现,但效果的模拟涉及算法问题,不同的算法,可能会设计出不同的移动效果,如匀速运动、加速和减速运动。
■实例设计
下面的示例演示了如何设计一个简单的元素滑动效果。通过指向元素、移动的位置以及移动的步数,可以设计按一定的速度把元素从当前位置移动指定的位置。本示例引用前面介绍的getB()方法,该方法能够获取当前元素的绝对定位坐标值。
//简单的移动函数
//参数:e表示元素,x和y表示要移动的终点坐标,t表示元素移动的步数
function slide(e, x, y, t){
var t = t || 100 //初始化步数,步数越大,速度越慢,移动越逼真
var o = getB(e); //当前元素的绝对定位坐标值
var x0 = o.x;
var yO = o.y;
var stepx = Math.round((x - x0) / t);
//计算x轴每次移动的步长,由于像素点不可用小数,所以会存在一定的误差
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'; //定位每次移动的位置
//如果距离终点距离小于步长,则停止循环,并校正最终坐标位置
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)
};
使用时应该定义元素绝对定位或相对定位显示状态,否则移动无效。在网页动画设计中,一般都使用这种定位移动的方式来实现。
<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>
点击加载更多评论>>