一、动画基础知识
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开始重复执行
第一步是确定元素的当前位置,可以通过查询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