js动画学习（一）

一、运动框架实现思路

1.匀速运动（属性值匀速变化）（改变 left, right, width, height, opacity 等）；

2.缓冲运动（属性值的变化速度与当前值与目标值的差成正比）；

3.多物体运动；

4.任意属性值的变化（用封装函数）；

5.链式运动（同一物体完成一系列的运动）；

6.多物体同时运动

====================================================

 二、简单运动之匀速运动

       下面的函数就是运动系列函数的基本框架。

 1   //鼠标移到元素上元素右移，鼠标离开元素回去。 
 2    var timer="";  3    function Move(speed,locat) {//移动速度，移动终点位置
 4        var ob=document.getElementById('box1');  5        clearInterval(timer);//先清除定时器，防止定时器的嵌套调用
 6        timer=setInterval(function () {  7            if (ob.offsetLeft==locat) {//当前位置到达指定终点，关闭定时器
 8  clearInterval(timer);  9            } else {//否则元素的left属性等于当前left加上每次改变的速度
10               ob.style.left=ob.offsetLeft+speed+'px'; 11  } 12        }, 30) 13    }

      举个栗子：

      在下面的HTML文档中调用上面的JS函数

 1 <style type="text/css">  2  *{
 3  margin: 0;
 4  padding: 0;
 5     }
 6     
 7  #box1{
 8  width: 200px;
 9  height: 200px;
10  background-color: red;
11  position: absolute;
12  left: 0;
13     }
14  </style>

 1 <div id="box1"></div>
 2 <script type="text/javascript">
 3  window.onload=function(){  4         var ob=document.getElementById('box1');  5  ob.onmouseover=function(){  6  Move(10,200);//鼠标移到div上时div从0移到200
 7  }  8  ob.onmouseout=function(){  9  Move(-10,0);//鼠标移走时div从200移到0
10  } 11  } 12 </script>

 

三、简单动画之改变透明度

 

 

 

      函数的模型和上一节基本一致，不同的是元素没有自身透明度属性，需要先把透明度初值定义好。

 

 1 var timer="";  2 var alpha=30;//透明度初始值  3 function changeOpacity(speed,target) {  4 var div1=document.getElementById('div1');//获取改变透明度的元素  5 clearInterval(timer);//清除定时器，避免嵌套调用  6 timer=setInterval(function () {  7 if (alpha==target) {//如果透明度达到目标值，清除定时器  8  clearInterval(timer);  9 } else {//当前透明度加上透明度变化的速度 10 alpha=alpha+speed; 11 div1.style.filter='alpha(opacity:'+alpha+')';//IE浏览器 12 div1.style.opacity=alpha/100; //火狐和谷歌 13  } 14 }, 30) 15 }

 

      在下面的HTML文档中引用上面的JS函数，实现透明度的改变

 

 1 <style type="text/css">  2  *{  3  margin: 0;  4  padding: 0;  5 }  6  #div1{  7  width: 200px;  8  height: 200px;  9  background: red; 10  filter: alpha(opacity:30);/*filter滤镜：不透明度,IE浏览器*/ 11  opacity: 0.3;/*火狐和谷歌*/ 12 } 13 </style>

 

 1 <div id="div1"></div>  2 <script type="text/javascript">  3  window.onload=function(){  4 var div1=document.getElementById('div1');  5  div1.onmouseover=function(){  6  changeOpacity(10,100);  7  }  8  div1.onmouseout=function(){  9  changeOpacity(-10,30); 10  } 11  } 12 </script>

 

      实现鼠标经过时透明度为100，鼠标离开时透明度变为30.