【javascript】实现动画效果

一、动画基础知识
1.位置
位置信息通常由CSS负责设置

element {
   
	position:absolute;
	top:50px;
	left:100px;
}

也可以使用DOM实现相同的效果

element.style.position = "absolute";
element.style.left = "100px";
element.style.top = "50px";

position属性的值有static，fixed，relative和absolute，其默认是值static。
top属性是元素距离文档顶部的距离，bottom则是元素距离文档底部的距离。left属性是元素距离文档左边界的距离，right是元素距离文档右边的距离。
为防止它们发生冲突，最好只是用top和bottom属性其中之一，left和right属性也是如此。

假设有一个p元素（其余html代码已省略）

<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";
}

我们可以观察到，调用该函数，会把这段文本摆放在距浏览器窗口左边界50像素，距离浏览器窗口的顶边界100像素的位置。

改变某个元素的位置，主要执行一个函数去改变这个元素的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";	
}

调用这两个函数，这个元素的显示位置立刻发生了变化，但是并不是我们想要的动画效果。这是由于javascript太有效率了，函数的执行间隔我们尚未察觉，因此需要创造时间间隔。

2.时间
setTimeout函数能使函数在经过一段预定的时间后才被执行，该函数有2个参数：第一个参数是一个字符串，代表将要执行的函数名，第二个参数是一个数值，代表经过多长时间后才开始执行该函数，单位是毫秒。
clearTimeout函数可以取消”等待执行“队列中的某个函数，该函数需要1个参数：保存着某个setTimeout函数调用返回值的变量。

修改positionMessage函数，使得在5秒后才调用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);
}

如此一来，文本元素将先出现在它原始位置上，经过5秒之后向右移动150像素

3.时间递增量
真正的动画效果是一个渐变的过程，元素应该从出发点逐步移动到目的地，而不是跳跃到目的地。
为了让元素的移动以渐变的方式发生，以下是moveMessage函数的逻辑。

1. 获得元素的当前位置
2. 若元素已经到达目的地，则退出该函数
3. 若元素尚未到达目的地，则将它向目的地移动一点儿
4. 经过一段时间间隔后从步骤1开始重复执行

第一步是确定元素的当前位置，可以通过查询style.top和style.left等位置属性完成。

var xpos = elem.style.left;
var ypos = elem.style.top;

调用该函数后，xpos，ypos分别将被赋值50px，100px，这两个值都是字符串，然而我们需要的是数值。
parseInt函数将字符串中的数值提取出来，返回值通常是整数；若需要提取浮点数，则使用parseFloat函数。
修改后的moveMessage函数：

function moveMessage(){
   
	if (!document.getElementById) return false;
	if (!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if (xpos == 200 && ypos ==100) return true;
	if (xpos < 200) xpos++;
	if (xpos > 200) xpos--;
	if (ypos < 100) ypos++;
	if (ypos > 100) ypos--;
    elem.style.left = xpos + "px";
    elem