Jquery Fx 源码简析

相对于 Extjs Fx 模块的处理 , Jquery Fx 的处理显得紧凑，灵活，不像 Extjs 严格的分层，将基础操作，中央定时队列抽象出来，然后再对具体元素，具体属性进行动画效果，Jquery 不严格区分，将对元素属性的操作以及定时队列管理糅合在一起，代码显得更精悍。

DOM动画处理的关键是对目标元素得目标 css 属性进行随时间设置不同的值，造成动画的效果，具体设计包括两个方面：

1。中央定时队列引入，将所有元素的所有不同属性变化导入中央队列，避免定时器分散设置与不同元素，性能提高

2。抽象出不同 css 属性随时间变化得公共计算，css 属性以及变化值做为变量处理。

 

 

Jquery 实践：

关建为 animate 方法

 

animate: function( prop, speed, easing, callback )

 

其他定义好的操作 

 

slideDown,slideUp,slideToggle,fadeIn,fadeOut,show,hide

 

都是对于 animate 函数的具体变量设置调用。

animate 参数的 prop 为 属性的结合，形式为 ：

 

[{
height:endValue
},
{
width:endValue
}]

 

其中 endValue 为动画结束的结果数字或者 jquery 预定义的一些常量 show ,hide ,toogle ...

在animate 函数中，对参数prop中的每个 css 属性计算开始，结束以及持续时间，对应每个元素以及元素的每个变化css属性构造出 jquery.fx类型 对象 ，由该对象调用其 custom 方面来具体实施动画效果。

 

fx: function( elem, options, prop ){
		this.options = options;
		this.elem = elem;
		this.prop = prop;

		if ( !options.orig )
			options.orig = {};
	}

 

框架图：

 

则 custom 方法 就如同之前分析，构造出回调函数，放入中央队列等待处理，关键点 ：

1：利用闭包，创造出内部函数，可以由中央计时器调用修改其特定元素特定css属性对应的jquery.fx的内部状态

//内部函数，由中央计时控制调用更新内部状态	
function t(gotoEnd){
			return self.step(gotoEnd);
		}

		t.elem = this.elem;

 

2：维护中央队列定时器，需要时才创建 timer。(与extjs 不同，中央队列耦合于动画操作)

if ( t() && jQuery.timers.push(t) && !timerId ) {
			timerId = setInterval(function(){
				var timers = jQuery.timers;

				for ( var i = 0; i < timers.length; i++ )
					if ( !timers[i]() )
						timers.splice(i--, 1);

				if ( !timers.length ) {
					clearInterval( timerId );
					timerId = undefined;
				}
			}, 13);

 

3:  根据当前时间与结束时间（由speed可得）的比例，以及用户设置的css属性值的最终结果来计算当前css属性的具体值

       3.1  两种比例计算方法， linear 与 swing

easing: {
		linear: function( p, n, firstNum, diff ) {
			return firstNum + diff * p;
		},
		swing: function( p, n, firstNum, diff ) {
			return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
		}
	},

 

       3.2  css 属性值的更新注意 opacity ,

 

step: {

		opacity: function(fx){
			jQuery.attr(fx.elem.style, "opacity", fx.now);
		},

		_default: function(fx){
			if ( fx.elem.style && fx.elem.style[ fx.prop ] != null )
				fx.elem.style[ fx.prop ] = fx.now + fx.unit;
			else
				fx.elem[ fx.prop ] = fx.now;
		}
	}

 

4.easing 的插件扩展方式

jquery自带了两种easing （即为如何从初值随着时间变化过度到终值的过程）：

 

easing: {
		linear: function( p, n, firstNum, diff ) {
			return firstNum + diff * p;
		},
		swing: function( p, n, firstNum, diff ) {
			return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
		}

 

如果要自定义easing，则实现一个函数（接口），参数解释：

p : 当前动画进行到的进度，范围为0 ~ 1

n : 动画从开始已经逝去的时间 （很少使用）

firstNum: 动画属性值的初始值

diff: 当前动画时刻属性值和属性终值的差值

另外还有第五个参数

duration: 设置的动画的持续时间

一般只要使用 p，firstNum，diff 参数即可。

关键是要保证返回值当 p=0 时返回 firstNum 即为初值，当 p=1 时返回 firstNum+diff 即为终值

比如 二次函数，越往后变化越剧烈：

 

jQuery.extend(jQuery.easing, { 
  'quadratic': function(p,n,firstNum,diff,duration) {
    return p* p* diff + firstNum;
  }
});

 

使用：

 

在

animate: function( prop, speed, easing, callback ) 

 中的 easing 参数中填入 quadratic 即可。