jquery1.43源码分析之动画部分

js实现动画的原理跟动画片的制作一样.动画片是把一些差距不大的原画以一定帧数播放.js动画是靠连续改变元素的某个css属性值,比如left, top.达到视觉的动画效果.

这几年出现了不少优秀的js游戏, 比如前段时间的《js版植物大战僵尸》.其实js游戏主要就是这4个部分组成. 绘图, 移动, 碰撞检测, 逻辑设定.如果用jquery来做的话, 前三项都会变得相当容易.

去年我也用jquery写了2个小游戏(jquery坦克大战和jquery泡泡堂).也写了自己的动画类.不过当时限于水平,没有深入分析 jQuery.fx类的实现. 这几天读过源码之后, 感受很多. jquery的fx类虽然只有600多行代码.也没有牵涉到太高深的js知识.里面的逻辑却比较复杂,很多处理也很精妙.当真正披荆斩棘弄懂这一部分之 后,相信对javascript的理解都会新上一层,当然也会更加喜欢jquery.

闲话少说, 在看源码之前, 先大概了解一下fx类的实现思想.
首先fx类非常依赖jquery的队列机制,没有这个东西的话,一切都无从谈起.有关jquery队列机制, 见http://www.iteye.com/topic/783260 .
回忆一下这句代码
$(‘div’).show(1000).hide(1000);
让这个div在1000ms内渐渐显示,然后再渐渐隐藏. 这2个动画是按次序执行的.在javascript的单线程异步模式下,管理异步的函数是很难的.在时间戳上, 既无法知道它准确的开始时间,又不能得到它准确的结束时间. 由于可能发生线程阻塞, 这些时间并不精确. 而让它们有序的执行, 最好的办法就是把元素上所有的动画都放入队列. 当第一个动画结束后, 在回调函数里通知第二个动画执行.

好比有个公司招聘, 只有一个面试官,而有很多应聘者在排队等候, 一个人面试完之后,出门的时候顺便告诉第二个人进去面试.以此反复. 而作为面试官, 只需要通知第一个面试者.

对于jquery, 当你使用animate函数执行动画的时候,这个动画并没有马上被执行, 它会先存入元素的队列缓存里. 然后看是不是已经有正在执行的动画. 如果没有, 就取出队列里的第一个动画并且执行(此时队伍里可能还有别人, 只是被stop函数暂停了), 如果有,那么要等到队列前面的所有动画执行完之后才会被通知执行.

就好像, 现在来了一位应聘者, 他先看看是不是已经有人在里面面试. 如果没有, 那么他可以直接进去面试. 如果有, 他必须得加入到队伍的最后一个. 等前面的人全部面试完了才轮到他.

animate函数的主要功能并不是执行动画. 它只作为api的入口,修正参数.然后把参数扔给fx类去执行动画. jquery的动画模块也并没有细化得太离谱, 有几个方法是比较重要的.
jQuery.fn.animate  修正参数
jQuery.speed    静态方法, 帮助animate修正参数, 并且重写回调函数.重写回调函数大概就是
callback = function(){
callback();
$(this.dequeue());
}
jQuery.fx   构造函数, 跟动画有关的具体操作都在这个构造函数的原型方法里.
jQuery.fx.tick  静态方法, 作为定时器的方法, 监控所有动画的执行情况.

我们最好先抛开复杂的参数修正等枝枝叶叶.直接从主干部分下手.先分析一下这个要使得这个动画类基本够用, 需要一些什么条件.
1  至少需要一个定时器来执行动画, 而且最好只有一个,即使有多个动画需要同时执行. 毕竟setTimeout和setInterval的开销是巨大的.
2  需要一个队列机制来管理动画顺序, jquery已经提供了queue和dequeue.
3  需要一种算法来计算属性的当前值.比如当前位置,当前大小.
4  需要一个具体执行动画的函数.
对于1, 我们制造一个tick函数来设置定时器, 并且在定时器中观察动画的执行情况.
对于2  直接用jquery的队列机制就可以了
对于3  jquery提供了默认的swing和liner. 我们还可以用一些别的算法, 比如tween.
对于4  这个函数得自己构建.怎么构建随意.不过它最好还带上停止动画等功能.

好吧, 现在正式开始.我们不在一开始就钻进jquery的源码里去.先模仿jquery的思想. 自己实现一个动画fx类. 通过这个简化了的fx类, 再来反过头来了解jquery.


实现原理是这样, 修正参数后为每个属性的动画都生成一个动画对象fx.比如一个元素要改变left和top, 那么为left和top分别创建一个动画fx对象, 然后把这些fx对象都push到全局timers数组.在定时器里循环这些fx对象, 每隔一段时间把他们对应的元素属性重新绘制一帧.直到达到指定的动画持续时间.这时触发这次animate的callback函数.并且从全局timer 数组把元素的这些fx对象都清除出去.直到timers里没有fx对象,表示页面的动画全部结束,此时清空定时器.当然这中间少不了队列控制.


先定义一个数组和一个定时器. 数组用来装载页面上所有动画. 当数组里没有动画时, 表示所有动画执行完毕, 这时清掉定时器.
var timers = [];
var timerId;

然后是animate函数. 我们叫它myAnimate. 它传入4个参数. 分别是{"left":500}这样的property-value对象,动画持续时间, 动画算法, 回调函数.
myAnimate里调用一个getOpt函数. getOpt的作用是把参数组装成对象返回. 并且在回调函数里加上通知下一个动画执行的动作. 即.dequeue()

 $.fn.extend({
     myAnimate: function(property, duration, easing, callback){
         var operate = jQuery.getOpt(duration, easing, callback);
     //得到一个包含了duration， easing， callback等参数的对象.并且callback已经被修正.
         $(this ).queue(function(){
     //把具体执行动画的函数放入队列, 注意这里如果队列中没有动画函数, 就直接执行这个匿名function了.
             var elem = this ;
             $.each(property, function(name, value){
           //遍历每个属性, 为每个属性的动画都生成一个fx对象.
                     var fx = new  FX(elem, operate, name);
                     var start = parseInt($(elem).css(name));
               //计算属性开始的值
                     var end = value;
               //属性结束的值
                     fx.custom(elem, start, end);
               //转交给FX的prototype方法cunstom执行动画
             })
         })
         return   this ;
       //返回this, 以便链式操作.
     }
 })

$.fn.extend({
	myAnimate: function(property, duration, easing, callback){
		var operate = jQuery.getOpt(duration, easing, callback);
	//得到一个包含了duration， easing， callback等参数的对象.并且callback已经被修正.
		$(this).queue(function(){
	//把具体执行动画的函数放入队列, 注意这里如果队列中没有动画函数, 就直接执行这个匿名function了.
			var elem = this;
			$.each(property, function(name, value){
          //遍历每个属性, 为每个属性的动画都生成一个fx对象.
					var fx = new FX(elem, operate, name);
					var start = parseInt($(elem).css(name));
              //计算属性开始的值
					var end = value;
              //属性结束的值
					fx.custom(elem, start, end);
              //转交给FX的prototype方法cunstom执行动画
			})
		})
		return this;
      //返回this, 以便链式操作.
	}
})

FX构造函数

 function FX(elem, options, name){
     this .elem = elem;
     this .options = options;
     this .name = name;
 }

function FX(elem, options, name){
	this.elem = elem;
	this.options = options;
	this.name = name;
}

FX构造函数里只初始化3个实例属性.比如
this.elem =  elem.
this.options={"duration": 500, "easing":"swing", callback:fn}
this.name = "left"
其他属性留在后面动态生成.

custom 方法
custom方法的任务主要是把当前fx对象放入全局的timer,并且启动定时器来观察动画执行情况.

 FX.prototype.custom = function(from, to){
     this .startTime = jQuery.now();
    //开始的时间, 和当前时间一起就可以计算已消耗时间.
    //再用已消耗时间和持续时间相比就知道动画是否结束.
     this .start = from;
     //属性初始的值
     this .end = to;
     //属性动画后的值
     timers.push(this );
    //把每个fx对象都push进全局的动画堆栈.
     FX.tick（);
    //启动定时器.
 }

FX.prototype.custom = function(from, to){
	this.startTime = jQuery.now();
   //开始的时间, 和当前时间一起就可以计算已消耗时间.
   //再用已消耗时间和持续时间相比就知道动画是否结束. 
	this.start = from;
	//属性初始的值
	this.end = to;
	//属性动画后的值
	timers.push(this);
   //把每个fx对象都push进全局的动画堆栈.
	FX.tick（);
   //启动定时器.
}

FX.tick
用来监控动画执行情况

 FX.tick = function(){
         if  (timerId)  return ;
   //只需要一个定时器,所以如果该定时器已经存在了,直接return
         timerId = setInterval(function(){
             for  (var i =  0 , c; c = timers[i++];){
   //每隔13ms, 遍历timerId里的每个动画对象fx, 让它们执行下一步.
                 c.step();
             }
             if  (!timers.length){
 //如果timers没有元素, 说明页面的所有动画都执行完毕, 清除定时器.
 //这个全局定时器就像一个总考官, 它会每隔一段时间巡视每个考生,
 //督促他们赶紧答题.
 //如果考生全部考试完毕交卷了, 他会进入休息状态.
 //这时如果又进来了考生, 他又进入工作状态.
                 FX.stop();
             }
         }, 13 );
     }

FX.tick = function(){
		if (timerId) return;
  //只需要一个定时器,所以如果该定时器已经存在了,直接return
		timerId = setInterval(function(){
			for (var i = 0, c; c = timers[i++];){
  //每隔13ms, 遍历timerId里的每个动画对象fx, 让它们执行下一步.
				c.step();
			}
			if (!timers.length){
//如果timers没有元素, 说明页面的所有动画都执行完毕, 清除定时器.
//这个全局定时器就像一个总考官, 它会每隔一段时间巡视每个考生, 
//督促他们赶紧答题.
//如果考生全部考试完毕交卷了, 他会进入休息状态.
//这时如果又进来了考生, 他又进入工作状态.
				FX.stop();
			}
		}, 13);
	}

FX.stop
清空定时器

 FX.stop = function(){
     clearInterval(timerId);
     timerId = null
 }

FX.stop = function(){
	clearInterval(timerId);	
	timerId = null
}

FX.prototype.step
执行每一步动画

 FX.prototype.step = function(){
         var t = jQuery.now();
     //当前时间
         var nowPos;
     //当前属性值
         if  (t >  this .startTime +  this .options.duration){
 //如果现在时间超过了开始时间 + 持续时间, 说明动画应该结束了
             nowPos = this .end;
 //动画的确切执行时间总是13ms的倍数, 很难刚好等于要求的动画持续时间,所以一般可能会有小小的误差, 修正下动画最后的属性值.
             this .options.callback.call( this .elem);
 //执行回调函数
             this .stop();
 //把已经完成动画的任务fx对象从全局timer中删除.
         }else {
             var n = t - this .startTime;
  //动画已消耗的时间
             var state = n / this .options.duration;
     var pos = jQuery.easing[this .options.easing](state, n,  0 ,  1 ,  this .options.duration);
             nowPos = this .start + (( this .end -  this .start) * pos);
         }
    //根据时间比和easing算法, 算出属性的当前值
             this .update(nowPos,  this .name);
    //给属性设置值
     }

FX.prototype.step = function(){
		var t = jQuery.now();
	//当前时间
		var nowPos;
	//当前属性值
		if (t > this.startTime + this.options.duration){
//如果现在时间超过了开始时间 + 持续时间, 说明动画应该结束了
			nowPos = this.end;
//动画的确切执行时间总是13ms的倍数, 很难刚好等于要求的动画持续时间,所以一般可能会有小小的误差, 修正下动画最后的属性值.
			this.options.callback.call(this.elem);
//执行回调函数
			this.stop();
//把已经完成动画的任务fx对象从全局timer中删除.
		}else{
			var n = t - this.startTime;
 //动画已消耗的时间
			var state = n / this.options.duration;		
	var pos = jQuery.easing[this.options.easing](state, n, 0, 1, this.options.duration);
			nowPos = this.start + ((this.end - this.start) * pos);
		}
   //根据时间比和easing算法, 算出属性的当前值
			this.update(nowPos, this.name);
   //给属性设置值
	}

FX.prototype.stop

从全局timer中删除一个已经完成动画任务的fx对象.

 FX.prototype.stop = function(){
     for  ( var i = timers.length -  1 ; i >=  0 ; i--){
         if  (timers[i] ===  this ){
             timers.splice(i, 1 );
         }
     }
 }

	FX.prototype.stop = function(){
		for ( var i = timers.length - 1; i >= 0; i--){
			if (timers[i] === this){
				timers.splice(i, 1);
			}
		}
	}

FX.prototype.update
给属性设置值

 FX.prototype.update = function(value, name){
         this .elem.style[name] = value;
     }

	
FX.prototype.update = function(value, name){
		this.elem.style[name] = value;
	}

注意FX.stop和FX.prototype.stop是不同的. 前者是取消定时器, 这样页面的所有动画都会结束. 后者是停止某个fx对象的动画.比如left, opacity.

下面是可供测试的全部代码

 <style type= "text/css" >

 #div1 {
     background:#aaa;
     width:188px;
     height:188px;
     position:absolute;
     top:10px;
     left: 110px;
 }

 #div2 {
     background:#aaa;
     width:188px;
     height:188px;
     position:absolute;
     top:310px;
     left: 110px;
 }

 </style>

 <body>
 </body>

 <div id="div1" >我是一个div</div>
 <div id="div2" >我是另一个div</div>

 <script type="text/javascript"  src= "jquery1.43.js" ></script>
 <script type="text/javascript" >


 var timers = [];
 var timerId;


 $.fn.extend({
     myAnimate: function(property, duration, easing, callback){
         var operate = jQuery.getOpt(duration, easing, callback);
         $(this ).queue(function(){
             var elem = this ;
             $.each(property, function(name, value){
                     var fx = new  FX(elem, operate, name);
                     var start = parseInt($(elem).css(name));
                     var end = value;
                     fx.custom(start, end);
             })
         })
         return   this ;
     }
 })

 function FX(elem, options, name){
     this .elem = elem;
     this .options = options;
     this .name = name;
 }

 FX.prototype.custom = function(from, to){
     this .startTime = jQuery.now();
     this .start = from;
     this .end = to;
     timers.push(this );
     FX.tick();
 }

 FX.prototype.step = function(){
         var t = jQuery.now();
         var nowPos;
         if  (t >  this .startTime +  this .options.duration){
             nowPos = this .end;
             this .options.callback.call( this .elem);
             this .stop();
         }else {
             var n = t - this .startTime;
             var state = n / this .options.duration;
             var pos = jQuery.easing[this .options.easing](state, n,  0 ,  1 ,  this .options.duration);
             nowPos = this .start + (( this .end -  this .start) * pos);
         }
             this .update(nowPos,  this .name);
     }

     FX.prototype.stop = function(){
         for  ( var i = timers.length -  1 ; i >=  0 ; i--){
             if  (timers[i] ===  this ){
                 timers.splice(i, 1 );
             }
         }
     }

     FX.prototype.update = function(value, name){
         this .elem.style[name] = value;
     }


     FX.tick = function(){
         if  (timerId)  return ;
         var self = this ;
         timerId = setInterval(function(){
             for  (var i =  0 , c; c = timers[i++];){
                 c.step();
             }
             if  (!timers.length){
                 FX.stop();
             }
         }, 13 );
     }

     FX.stop = function(){
         clearInterval(timerId);
         timerId = null
     }

 jQuery.getOpt = function(duration, easing, callback){

     var obj = {
         "duration" : duration,
         "easing" : easing
     }

     obj.callback = function(){
         callback && callback();
         $(this ).dequeue();
     }

     return  obj;
 }

 $.fn.stop = function(){
     for  ( var i = timers.length -  1 ; i >=  0 ; i-- ) {
         if  (timers[i].elem ===  this [ 0 ]){
             timers[i].stop();
         }
     }
 }



 $("#div1" ).myAnimate({ "top" : 500 },  1000 ,  "swing" ).myAnimate({ "top" : 100 },  500 ,  "swing" ).myAnimate({ "left" : 500 },  500 ,  "swing" ).myAnimate({ "top" : 500 },  500 ,  "swing" );

 $("#div2" ).myAnimate({ "left" : 1000 },  1000 ,  "swing" )


 function stop(){
     $("#div1" ).stop();
 }

 function cont(){
     $("#div1" ).dequeue();
 }

 </script>
 <button onclick="stop()" >停止</button>
 <button onclick="cont()" >继续后面的动画</button>

<style type="text/css">

#div1 {
	background:#aaa;
	width:188px;
	height:188px;
	position:absolute;
	top:10px;
	left: 110px;
}

#div2 {
	background:#aaa;
	width:188px;
	height:188px;
	position:absolute;
	top:310px;
	left: 110px;
}

</style> 

<body> 
</body>

<div id="div1">我是一个div</div>
<div id="div2">我是另一个div</div>

<script type="text/javascript" src="jquery1.43.js"></script> 
<script type="text/javascript">
	

var timers = [];
var timerId;


$.fn.extend({
	myAnimate: function(property, duration, easing, callback){
		var operate = jQuery.getOpt(duration, easing, callback);
		$(this).queue(function(){
			var elem = this;
			$.each(property, function(name, value){
					var fx = new FX(elem, operate, name);
					var start = parseInt($(elem).css(name));
					var end = value;
					fx.custom(start, end);
			})
		})
		return this;
	}
})

function FX(elem, options, name){
	this.elem = elem;
	this.options = options;
	this.name = name;
}
	
FX.prototype.custom = function(from, to){
	this.startTime = jQuery.now();
	this.start = from;
	this.end = to;
	timers.push(this);
	FX.tick();
}

FX.prototype.step = function(){
		var t = jQuery.now();
		var nowPos;
		if (t > this.startTime + this.options.duration){
			nowPos = this.end;
			this.options.callback.call(this.elem);
			this.stop();
		}else{
			var n = t - this.startTime;
			var state = n / this.options.duration;
			var pos = jQuery.easing[this.options.easing](state, n, 0, 1, this.options.duration);
			nowPos = this.start + ((this.end - this.start) * pos);
		}
			this.update(nowPos, this.name);
	}

	FX.prototype.stop = function(){
		for ( var i = timers.length - 1; i >= 0; i--){
			if (timers[i] === this){
				timers.splice(i, 1);
			}
		}
	}

	FX.prototype.update = function(value, name){
		this.elem.style[name] = value;
	}


	FX.tick = function(){
		if (timerId) return;
		var self = this;
		timerId = setInterval(function(){
			for (var i = 0, c; c = timers[i++];){
				c.step();
			}
			if (!timers.length){
				FX.stop();
			}
		}, 13);
	}
	
	FX.stop = function(){
		clearInterval(timerId);	
		timerId = null
	}

jQuery.getOpt = function(duration, easing, callback){
	
	var obj = {
		"duration": duration,
		"easing": easing
	}
  
	obj.callback = function(){
		callback && callback();
		$(this).dequeue();	
	}
	
	return obj;
}

$.fn.stop = function(){
	for ( var i = timers.length - 1; i >= 0; i-- ) {
		if (timers[i].elem === this[0]){
			timers[i].stop();	
		}		
	}
}



$("#div1").myAnimate({"top":500}, 1000, "swing").myAnimate({"top":100}, 500, "swing").myAnimate({"left":500}, 500, "swing").myAnimate({"top":500}, 500, "swing");

$("#div2").myAnimate({"left":1000}, 1000, "swing")


function stop(){
	$("#div1").stop();	
}

function cont(){
	$("#div1").dequeue();	
}

</script> 
<button onclick="stop()">停止</button>
<button onclick="cont()">继续后面的动画</button>

--------------------分割线---------------------------------

上面的代码跟jquery有少许不同, 因为我写的时候有的地方忘记jquery是怎么搞的了.不过思路还是一样的.
尽管这样, jquery的做法要麻烦很多. 毕竟作为一个库, 要考虑的东西是非常非常多的.

一行一行来看代码.
首先定义一个常量

 fxAttrs = [
         // height animations
         [ "height" ,  "marginTop" ,  "marginBottom" ,  "paddingTop" ,  "paddingBottom"  ],
         // width animations
         [ "width" ,  "marginLeft" ,  "marginRight" ,  "paddingLeft" ,  "paddingRight"  ],
         // opacity animations
         [ "opacity"  ]
     ]

fxAttrs = [
		// height animations
		[ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
		// width animations
		[ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
		// opacity animations
		[ "opacity" ]
	]

这个东西是为了得到当用动画形式执行show,hide,slideDown, slideUp时,所需要改变的属性值.比如show,需要改变的并不仅仅是width和height.还包括marginLeft,paddingLeft等属性.

jQuery.prototype.show
show和hide这两个常用的方法实现都比较简单. show和hide可以直接隐藏/显示元素,也可以以动画渐变的方式来达到效果.直接隐藏和显示就是设置display属性,动画效果则要用 animate函数改变width,height,marginLeft等.不过设置display的时候还要考虑css属性对元素可见性的影响,以及尽 量避免reflow回流.留在css部分讨论.

jQuery.prototype.toggle
切换元素的可见状态, 就是show和hide这两个操作集中到一起.
toggle有好几种调用方式,
1  不传递任何参数, 这时仅仅只切换元素的可见状态
2  只有一个boolean类型的参数. 这个参数实际是一个返回值为boolean的表达式. 当这个表达式结果为true的时候显示元素, 反之隐藏. 即toggle(switch)形式. 比如
var flip = 0;   
$("button").click(function () {
        $("p").toggle( flip++ % 3 == 0 );   
});
3  传入一些函数, 当点击元素的时候, 按顺序执行这些函数的某一个.

4  可以传入3个参数, 分别为speed, easing, callback. 即以动画的形式切换可见性.

这几个方法的源码都跟动画的核心机制关系不大, 反而是和css, evnet模块联系比较密切. 就不放在这里讨论了.

现在看看关键的animate函数.前面讲过, animate的作用主要是修正参数, 把参数传递给fx类去实现动画.

 animate: function( prop, speed, easing, callback ) {
         //prop是{"left":"100px", "paddingLeft": "show"}这种形式,可以由用户自己传进来, 在show,   hide等方法里, 是由genfx
 //函数转化而来.
         var optall = jQuery.speed(speed, easing, callback);
         //optall是一个包含了修正后的动画执行时间, 动画算法, 回调函数的对象.
 //speed方法把animate函数的参数包装成一个对象方便以后调用，
 //并且修正callback回调函数, 加上dequeue的功能.

         if  ( jQuery.isEmptyObject( prop ) ) {
         //prop 是个空对象.不需要执行动画,直接调用回调函数.
             return   this .each( optall.complete );
         }
         return   this [ optall.queue ===  false  ?  "each"  :  "queue"  ](function() {
             //如果参数里指定了queue 为false, 单独执行这次动画,
          //而不是默认的加入队列.
             var opt = jQuery.extend({}, optall), p,
             //复制一下optall对象.
             isElement = this .nodeType ===  1 ,
             //是否是有效dom节点.
             hidden = isElement && jQuery(this ).is( ":hidden" ),
             //元素的可见性
             self = this ;
          //保存this的引用, 在下面的闭包中this指向会被改变
             for  ( p in prop ) {
             //遍历"left", "top"等需要执行动画的属性.
                 var name = jQuery.camelCase( p );
             //把margin-left之类的属性转换成marginLeft
                 if  ( p !== name ) {
                     prop[ name ] = prop[ p ];
                 //把值复制给camelCase转化后的属性
                     delete prop[ p ];
                 //删除已经无用的属性
                     p = name;
                 }
                 if  ( prop[p] ===  "hide"  && hidden || prop[p] ===  "show"  && !hidden ) {
                 //元素在hidden状态下再隐藏或者show状态下再显示
                     return  opt.complete.call( this );
                 //不需要任何操作, 直接调用回调函数.
                 }

                 if  ( isElement && ( p ===  "height"  || p ===  "width"  ) ) {
                 //如果是改变元素的height或者width
 font-size: x

分享到：

[转]Linux chmod 命令详解 | 可以上传、下载文件的SSH客户端软件--Secu ...

• 2010-10-19 11:15
• 浏览 403
• 评论(0)
• 分类:Web前端
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论