JavaScript运动框架大集结---拥有JavaScript完美运动框架你将制作任意基于web2.0网页动画

JavaScript运动框架大集结---拥有一套JavaScript完美运动框架你将制作任意基于web2.0网页动画

JS运动框架的发展演变

1 starmove(iTarget)  原始运动框架
///////////////////////////////////

///////////////////////////////////
2 startmove(obj,iTarget) 多物体运动框架
///////////////////////////////////////

///////////////////////////////////////
3 startmove(obj,attr,iTarget) 任意值的运动框架
//////////////////////////////////////////////

/////////////////////////////////////////////
4 startmove(obj,attr,iTarget,fn) 链式运动框架
////////////////////////////////////////////////////
/******************************获取行间函数**************************************/
		function getStyle(obj,name){
				if(obj.currentStyle){
					return obj.currentStyle[name];
				}
				else{
					return getComputedStyle(obj,false)[name];
				}
			}
/******************************链式运动函数****************************************************/			
			function startmove(obj,attr,iTarget,fnEnd){//另外加一个函数的参数fnEnd
				
				clearInterval(obj.time);
				obj.time=setInterval(function(){
					var cur=0;
					if(attr=='opacity'){
						cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入
					}
					else{
						cur=parseInt(getStyle(obj,attr));}
					
					var speed=(iTarget-cur)/20;
					speed=speed>=0?Math.ceil(speed):Math.floor(speed);
					if(iTarget==cur){
						clearInterval(obj.time);
						if(fnEnd)fnEnd();//如果要调用了函数则会调用该函数
					}
					else{
						if(attr=='opacity'){
							obj.style.filter='alpha(opacity:'+(cur+speed)+')';
							obj.style.opacity=(cur+speed)/100;
						}
						else{obj.style[attr]=cur+speed+'px';}
						
					}
				},30);
				/********************************链式运动函数调用*********/
				
				                                           
			}
///////////////////////////////////////////////////

5 startmove(obj,json,fn) 完美运动框架
///////////////////////////////////////////
		function getStyle(obj,name){
				if(obj.currentStyle){
					return obj.currentStyle[name];
				}
				else{
					return getComputedStyle(obj,false)[name];
				}
			}
		//startmove(oDiv,{width:400,height:400})
			function startmove(obj,json,fnEnd){
				
				clearInterval(obj.time);
				obj.time=setInterval(function(){
					var bStop=true;//假设所有的值都已经到了
					for(var attr in json)
					{
					var cur=0;
					if(attr=='opacity'){
						cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入
					}
					else{
						cur=parseInt(getStyle(obj,attr));}
					
					var speed=(json[attr]-cur)/20;
					speed=speed>=0?Math.ceil(speed):Math.floor(speed);
					if(cur!=json[attr])  bStop=false;
						if(attr=='opacity'){
							obj.style.filter='alpha(opacity:'+(cur+speed)+')';
							obj.style.opacity=(cur+speed)/100;
						}
						else{obj.style[attr]=cur+speed+'px';}
				   }
					if(bStop){
						clearInterval(obj.time);
			             if(fnEnd)fnEnd();
					}
				},30);
			}