JavaScript动画基础知识

1.位置

把文档中某个元素摆放到一个特定的位置是很容易的事。不妨假设有一个这样的元素：

<p id=”message”>Whee!</p>

于是，可以用一个JavaScript函数来设置这个元素的位置：

function positionMessage(){
	if(!document.getElementById)	return false;
	if(!document.getElementById("message"))	return false;
	var elem = document.getElementById("message");
	elem.style.position = "absolute";
	elem.style.left = "50px";
	elem.style.top = "100px";
}

在页面加载时调用这个positionMessage函数，会把这段文本摆放到距浏览器窗口的左边界50像素，距浏览器窗口的顶边界100像素的位置：

Window.onload = positionMessage;

不过，最好是用addLoadEvent函数来完成，如下所示

function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != 'function'){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}
addLoadEvent(positionMessage);

改变某个元素的位置也很简单，只要执行一个函数去改变这个元素的style.top或style.left等属性就可以了：

function moveMessage(){
	if(!document.getElementById)	return false;
	if(!document.getElementById("message"))	return false;
	var elem = document.getElementById("message");
	elem.style.left = "200px";
}

如果让moveMessage函数在页面加载时运行，这个元素的位置立即发生变化——由position函数给出的原始位置会被立即覆盖：

addLoadEvent(positionMessage);
addLoadEvent(moveMessage);

要实现真正的动画效果，必须让元素的位置随着时间不断地发生变化。因此我们必须“创造”出时间间隔来。

2.时间

JavaScript函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行。这个函数带有两个参数：第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间后才开始执行第一个参数所给出的函数：

setTimeout("function", interval)

可以用一个名为clearTimeout的函数来取消“等待执行”队列里的某个函数。这个函数需要一个参数——保存着某个setTimeout函数调用返回值的变量：

clearTimeout(variable)

修改positionMessage函数，让它在5秒（或者说5000毫秒）之后才去调用moveMessage函数：

function positionMessage(){
	if(!document.getElementById)	return false;
	if(!document.getElementById("message"))	return false;
	var elem = document.getElementById("message");
	elem.style.position = "absolute";
	elem.style.left = "50px";
	elem.style.top = "100px";
	movement = setTimeout("moveMessage()", 5000);
}

positionMessage函数仍将在页面加载时得到执行：

addLoadEvent(positionMessage);

3.时间递增量

我们现在更新一下moveMessage函数，让元素的移动以渐变的方式发生。下面是新moveMessage函数的逻辑。

（1）获得元素的当前位置。

（2）如果元素已经到达它的目的地，则退出这个函数。

（3）如果元素尚未到达它的目的地，则把它向目的地移近一点儿。

（4）经过一段时间间隔之后从步骤1开始重复上述步骤。

下面是moveMessage函数的代码清单：

function moveElement(elementID, final_x, final_y, interval){
	if(!document.getElementById)	return false;
	if(!document.getElementById(elementID))	return false;
	var elem = document.getElementById(elementID);
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if(xpos == final_x && ypos == final_y){
		return true;
	}
	if(xpos<final_x){
		xpos++;
	}
	if(xpos>final_x){
		xpos--;
	}
	if(ypos<final_y){
		ypos++;
	}
	if(ypos>final_y){
		ypos--;
	}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," +interval + ")";
	movement = setTimeout(repeat, interval);
}