JavaScript第十章：动画基础知识

  前面章节我介绍了如何利用DOM技术修改文档的样式信息。虽然说JavaScript添加样式可以节约时间和精力。但总的来说，CSS仍是完成这类任务的最佳工具。  

  而如果我们想随着时间的变化不断地改变某个元素的样式，则只能使用JavaScript。动画就是让元素的位置随着时间而不断地变化。

1.位置

     位置信息通常都是由CSS负责设计的。

     下面分别是由CSS设置得位置信息和与之等价的JavaScript代码。

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

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

 ①position属性：

       static：默认值。有关元素按照它们在标记中出现的先后顺序出现在浏览器窗口。

       relative：与static类似。而区别在于属性值为relative的元素还可以从文档的正常显示顺序里脱离出来。

       absolute：将元素摆放到容纳它的“容器”的任何位置。这个容器可以是文档，要么是一个有着fixed或absolute属性的父元素。

 ②top属性：把该元素摆放到距文档顶特定距离的位置。

 ③bottom属性：把该元素拜访到距文档底特定距离的位置。

 ④注意：最好只使用top或只适应bottom，left和right亦是如此。

<p id="message">
Wheel!
</p>

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

        

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

 

2.时间

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

     ①setTimeout("fucntion",interval)：

          第一个参数:将要执行的那个函数的名字

          第二个参数：数值，以毫秒为单位设定了需要经过多长事件才开始执行第一个参数所给出的函

     ②clearTimeout（variable）：取消“等待执行队列里的某个函数”

          参数：保存着某个setTimeout函数调用返回值的变量。

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

 

3.时间递增量

      真正的动画效果是一个渐变的过程。元素应该从出发点逐步地移动到目的地，而不是从出发点一下子跳跃到目的地。

      ①parseInt（string）：可把字符串里的数值信息提取出来。

      ②parseFloat（string）   

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){
		ypos--;
	}
	if(ypos<100){
		ypos++;
	}
	if(ypos>100){
		ypos--;
	}
	elem.style.top=ypos+"px";
	elem.style.left=xpos+"px";
}

        

4.抽象

     刚才编写的moveMessage函数只能完成一项特定的任务。所有信息都是硬编码在函数代码里面。

     我们要创建一个moveElement函数，每次调用这个新函数可能变化的东西。

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="moveMessage('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	movement=setTimeout(repeat,interval);
	}