javascript动画封装

时间 2019-11-09

原文原文链接

1.获取样式，须要自定义函数getStyle，style属性可读写，可是只能读取行内样式，所以要取得非行内样式须要用到IE的currentStyle[attr],以及chrome等其余浏览器的getComputedStyle(obj,flase)[attr]函数以下javascript

function getStyle(obj,attr){
     if(obj.currentStyle){//简写 return obj.currentStyle?obj.currentStyle[style]:getComputedStyle(obj,false)[attr];

             return obj.currentStyle[attr];
      }else{
             return getComputedStyle(obj,false)[attr]
               }
}

2.链式动画中的回调函数位置以及一个小细节由于要在第一个函数动画执行完毕以后执行回调函数，故if（fn）{fn()}应该放在判断条件以后，也就是在清空计时器以后，放在其他位置会让其直接先执行。代码以下html

if(cur==iTarget){
			 clearInterval(obj.timer);	
			 if(fn){
			fn();
		 }
			 }else{
		 obj.style[Attr]=cur+speed+"px";
		}

另外回调函数放置时，第一个函数动画中this指代选取的元素，而回调函数中的this指代的window对象（亲测，用选取元素后定义的变量代替便可,或者在前面你函数定义 var g=this;）java

3.透明度没有单位‘px’，要另外写条件，else{ if(){} else() } 且注意兼容性IE中（filter:alpha(opacity:30)）chrome

4.同时改变两个以上属性须要用到json，并用for in循环取出每一个值json

5.注意定时器，设置为当天元素属性，避免全部元素用同必定时器。obj.timer=setInterval（）浏览器

6.注意避免在达到某一个属性目标值以后定时器即中止，使得其余属性值不能达到目标值。立标杆，dom书中也有立标杆的作法，例如先设置odd=flase，实现各行换色。框架源代码（注意flag位置，放在定时器内并不能达到效果）框架

！（通过屡次测试，利用for in循环加标杆，发现for in循环的两个属性的计时器是同时进行的，好比第一width，第二个height，例如我初始位置width:400,height:200，onmouseover=starmove(this,{width:1000},)
onmouseout=starmove(this,{height:400,width:200}),开始可以达到移入宽度变为1000，移出高度增长，宽度到达200，但第二次移入宽度达到1000之后，移出的时候宽度并不能到达200，只能到达让计时器进行一次的值，由于此时height已经到达400了，for in遍历进去的时候检测标杆是否为真，只要当第一个属性的标杆为真后，计时器就会退出，这里我认为立下的标杆仅仅表明了第一个属性是否达到目标值，因此当把二者位置交换，即onmouseout=starmove(this,{width:200,heoght:400}),问题得以解决，由于宽度（第一个属性）始终未达到目标值，而高度达到目标值无影响。测试效果正确！<此处存疑，更改位置只是解决当鼠标移入函数只有一个属性如宽度，鼠标移出函数有两个属性值得时候>！！！最后发现，对于先后改变属性个数不一致的状况应该把多出的第二个或者更多属性放在重复出现的属性后面，不然动画在执行有限次后不能完美执行，问题代码以下）如上所说改变属性height:300，width:200位置后便可解决问题dom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画框架</title>
<style>
*,div{margin:0px;padding:0px;}
div{width:400px;height:200px;margin-bottom:40px;background:#0F0;opacity:0.3;fliter:alpha(opacity:30);border:2px solid blue;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
<script type="text/javascript">
window.onload=function(){
	var od=document.getElementsByTagName('div');
	for(var i=0;i<od.length;i++){
	     od[i].onmouseover=function(){
			 var g=this;
			 starMove(this,{width:1000}
				)
			 }	
		od[i].onmouseout=function(){			
			 starMove(this,{height:300,width:200,}); 
			 }		
	}
}
 function starMove(obj,json,fn){//fn回调函数
  clearInterval(obj.timer);//执行动画以前清除动画
  var flag = true;//是否动画都完成了
  obj.timer = setInterval(function(){
//var flag=true  flag放在此处可以使用回调函数
   for(var attr in json){
   var icur = 0;
   if(attr == 'opacity'){
   icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,而且四舍五入下
   //计算机在计算小数的时候每每是不许确的！
   }
   else{
   icur = parseInt(getStyle(obj,attr));
   }
   var speed =0;
   speed = (json[attr] - icur)/8;
   speed = speed>0?Math.ceil(speed):Math.floor(speed);
   if(icur != json[attr]){
   flag = false;
   }
   if(attr == 'opacity'){
   obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
   obj.style.opacity = (icur+speed)/100;
   }
   else{
   obj.style[attr] = icur+speed+'px';
   }
   if(flag){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
   }
  }
  },30);
 }
 function getStyle(obj,attr)
 {
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }
  else{
  return getComputedStyle(obj,false)[attr];
  }
 }
</script>
</html>