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.