用javascript实现基础动画效果

用javascript实现基础动画效果

一 定义：动画就是让元素的位置随着时间而不断地发生变化。

1.位置

网页元素在浏览器窗口里的位置是一种中表示性的信息，由css负责设置的。

element{

position:absolute;

top:50px;

left:100px;

}

2.时间

javascript函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行。

setTimeout("function",interval)

第一个参数通常是字符串，其内容是要执行的那个函数的名字；

第二个参数是一个数值，他以毫秒为单位设定了需要经过多长时间后才开始执行第一个参数所给出的函数。

如果想取消某个正在排队的等待执行的函数，就必须事先像上面的这样把setTimeout函数返回值赋给一个变量。可以用clearTimeout的函数来取消等待执行的队列里的某个函数。这个函数需要一个参数-保存着某个setTimeout函数条用返回值的变量。

clearTimeout(variable)
3.时间递增量

函数逻辑

  
  
  
  

   
   
   
   
获得元素的当前位置。
   
   
   
   
如果元素已经到达它的目的地，则退出这个函数。
   
   
   
   
如果元素尚未到达它的目的地，则把它向目的地移近一点。
   
   
   
   
经过一段时间间隔之后从步骤1开始重复上述步骤。
  
  
  
  

function moveMessage(){
	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.style.top=ypos+"px";
	movement=setTimeout("moveMessage()",10);
}

4抽象

moveMessage函数只是完成一项非常特定的任务。如果把固定的数字改为变量，这个函数的灵活性和适用范围就会大大提高。