jQuery-1.9.1源码分析系列（十五） 动画处理——缓动动画核心Tween

　　在jQuery内部函数Animation中调用到了createTweens（）来创建缓动动画组，创建完成后的结果为：

　　

　　可以看到上面的缓动动画组有四个原子动画组成。每一个原子动画的信息都包含在里面了。

　　仔细查看createTweens函数，实际上就是遍历调用了tweeners ["*"]的数组中的函数（实际上就只有一个元素）。

    function createTweens( animation, props ) {
        jQuery.each( props, function( prop, value ) {
            var collection = ( tweeners[ prop ] || [] ).concat( tweeners[ "*" ] ),
            index = 0,
            length = collection.length;
            for ( ; index < length; index++ ) {
                if ( collection[ index ].call( animation, prop, value ) ) {

                    // we're done with this property
                    return;
                }
            }
        });
    }

　　再次查看这个tweeners ["*"][0]函数，主要代码如下

function( prop, value ) {
    var end, unit,
    //根据css特征值获取缓动动画结构
    tween = this.createTween( prop, value ),
    parts = rfxnum.exec( value ),
    target = tween.cur(),
    start = +target || 0,
    scale = 1,
    maxIterations = 20;

    if ( parts ) {
        end = +parts[2];
        unit = parts[3] || ( jQuery.cssNumber[ prop ] ? "" : "px" );

        //非像素单位的属性
        if ( unit !== "px" && start ) {
            // 从一个非零起点开始迭代，
            //对于当前属性，如果它使用相同的单位这一过程将是微不足道
            // 后备为end，或一个简单的常量
            start = jQuery.css( tween.elem, prop, true ) || end || 1;

            do {
                //如果前一次迭代为零，加倍，直到我们得到*东西* 
                //使用字符串倍增因子，所以我们不会偶然看到scale不改变
                scale = scale || ".5";

                // 调整和运行
                start = start / scale;
                jQuery.style( tween.elem, prop, start + unit );

                // 更新scale, 默认0或NaN从tween.cur()获取
                // 跳出循环，如果scale不变或完成时, 或者我们已经觉得已经足够了
            } while ( scale !== (scale = tween.cur() / target) && scale !== 1 && --maxIterations );
        }

        tween.unit = unit;
        tween.start = start;
        //如果提供了+=/-=记号，表示我们正在做一个相对的动画
        tween.end = parts[1] ? start + ( parts[1] + 1 ) * end : end;
        }
        return tween;
    }]
};

　　可以看出除了hide/show两种动画外的其他动画都经过tweeners ["*"][0]这个函数封装了动画组。其中有几个关键的数组start/end/unit。特别是对非像素单位的动画start值获取费了一番功夫。

　　还有一个比较关键的地方是都用了this.createTween获取单个css特征的基础的动画特征。而animation. createTween中直接调用jQuery.Tween来处理。接下来我们详解之。

　　

a.jQuery.Tween

---

　　jQuery.Tween的结构和jQuery类似

function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
    constructor: Tween,
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        this.easing = easing || "swing";
        this.options = options;
        this.start = this.now = this.cur();
        this.end = end;
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
    cur: function() {...},
    run: function( percent ) {...}
};

Tween.prototype.init.prototype = Tween.prototype;

　　是不是有一种很熟悉的赶脚。

　　里面cur函数用来获取当前的css特征值

cur: function() {
    var hooks = Tween.propHooks[ this.prop ];

    return hooks && hooks.get ?
    hooks.get( this ) :
    Tween.propHooks._default.get( this );
},

View Code