jQuery 源码解析(三十) 动画模块 $.animate()详解

jQuery的动画模块提供了包括隐藏显示动画、渐显渐隐动画、滑入划出动画，同时还支持构造复杂自定义动画，动画模块用到了之前讲解过的很多其它很多模块，例如队列、事件等等，

$.animate()的用法如下:animate(prop,speed,easing,callback)，参数如下:

prop 　　;对象， ;包含将要动画的样式
speed 　 ;字符串或数字 ;动画运行持续时间，单位毫秒,可以设置为"slow"、"normal"、"fast"等预定义时间
easing 　;字符串　 ;表示所使用的缓动函数
callback ;回调函数 ;当动画完成时被调用

还是举个栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style>
        div{width: 200px;height: 50px;background: #cfc;}
    </style>
</head>
<body>
    <button>按钮</button>
    <div></div>
    <script>
        $('button').click(function(){
            $('div').animate({width:'400px',height:'100px',background:'#f00'},2000,'linear',function(){alert('动画完成成功')})
        })
    </script>    
</body>
</html>

我们定义一个div和一个按钮，再在按钮上绑定一个事件，该事件回调用$.animate()来修改div的样式，动画完成后再执行一个回调函数，效果如下:

挺好用的啊，很方便的，可以用jQuery实现各种动画，尺寸、位置、颜色，还可以配合CSS3的transform属性实现各种酷炫效果。

源码分析

jQuery内在执行$.animate()时会遍历参数1也就是我们要修改的样式，然后分别创建一个对应的$.fx对象，实际上最终的动画是在$.fx这个对象上运行的，另外jQuery内部会维护一个setInterval()，默认会每隔13毫秒执行一次样式的修改，这样看起来就和动画一样了。

直接看代码吧,$.animate()实现如下:

jQuery.fn.extend({
    animate: function( prop, speed, easing, callback ) {                //动画入口函数，负责执行单个样式的动画，
        var optall = jQuery.speed( speed, easing, callback );                //调用$.speed修正运行时间、缓动函数，重写完成回调函数

        if ( jQuery.isEmptyObject( prop ) ) {                                //如果prop中没有需要执行动画的样式
            return this.each( optall.complete, [ false ] );                        //则立即调用完成回调函数
        }

        // Do not change referenced properties as per-property easing will be lost
        prop = jQuery.extend( {}, prop );                                    //复制一份动画样式的集合，以避免改变原始动画样式集合，因为每个动画样式的缓存函数最终会丢失。

        function doAnimation() {                                            //执行动画的函数，后面再讲解，我们先把流程理解了
            /*略*/
        }

        return optall.queue === false ?                                        //queue表示是否将当前动画放入队列
            this.each( doAnimation ) :                                             //如果optall.queue为false,则调用.each()方法在每个匹配元素上执行动画函数doAnimation();
            this.queue( optall.queue, doAnimation );                             //否则调用方法.queue()将动画函数doAnimation()插入选项queue指定的队列中。
    },
})

$.queue之前已经讲过了，可以看这个连接https://www.cnblogs.com/greatdesert/p/11670591.html,由于插入的是默认动画，因此插入到队列后就会自动执行的。

$.speed()是用于负责修正运行时间、缓动函数，重写完成回调函数的，如下:

jQuery.extend({
    speed: function( speed, easing, fn ) {         //负责修正运行时间、缓动函数，重写完成回调函数。//speed:表示动画持续时间、easing是所使用的缓动函数、fn是动画完成时被调用的函数。
        var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {     //如果speed是对象，即$.fn.animate()只传入了两个参数的格式，则将该对象赋值给opt对象。
            complete: fn || !fn && easing ||                                                     //依次尝试把最后一个参数作为完成回调函数保存到complete中
                jQuery.isFunction( speed ) && speed,
            duration: speed,                                                                     //动画持续时间
            easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing             //如果参数3非空，则设置easing为参数2  
        };

        opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :     //修正duration选项
            opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;

        // normalize opt.queue - true/undefined/null -> "fx"
        if ( opt.queue == null || opt.queue === true ) {
            opt.queue = "fx";
        }

        // Queueing 
        opt.old = opt.complete;                                                                 //备份完成回调函数complete到old属性中

        opt.complete = function( noUnmark ) {                                                     //重写complete函数，当前动画完成时，自动取出下一个动画函数。
            if ( jQuery.isFunction( opt.old ) ) {
                opt.old.call( this );
            }

            if ( opt.queue ) {
                jQuery.dequeue( this, opt.queue );
            } else if ( noUnmark !== false ) {
                jQuery._unmark( this );
            }
        };

        return opt;                                                                             //最后返回opt
    },
})

$.animate函数非常灵活，可以有如下形式:

animate(prop,speed,easing,callback)
animate(prop,easing,callback)
animate(prop,speed,callback)
animate(prop,callback)
animate(prop,obj)

这就是$.speed函数的功劳了。

回到$.animate函数内，当将doAnimation插入到队列后，由于是默认队列就会自动执行该函数，doAnimation实现如下:

function doAnimation() {                    //负责遍历动画样式集合，先修正、解析、备份样式名，然后为每个样式调用构造函数jQuery.fx()构造动画
    // XXX 'this' does not always have a nodeName when running the
    // test suite

    if ( optall.queue === false ) {                //如果选项queue为false,动画将会立即执行
        jQuery._mark( this );
    }

    var opt = jQuery.extend( {}, optall ),                    //opt是完整选项集optall的副本;
        isElement = this.nodeType === 1,                    //isElement用于检测当前元素是否是DOM元素
        hidden = isElement && jQuery(this).is(":hidden"),    //hidden表示当前元素是否是可见的
        name, val, p, e,
        parts, start, end, unit,
        method;

    // will store per property easing and be used to determine when an animation is complete
    opt.animatedProperties = {};                            //存放动画样式的缓存函数，当动画完成后，属性值被设置为true。

    for ( p in prop ) {                                        //遍历动画样式集合prop。修正、解析、备份样式        ;p是每一个样式的名称，比如:width height

        // property name normalization
        name = jQuery.camelCase( p );                            ///将样式名格式化为驼峰式
        if ( p !== name ) {
            prop[ name ] = prop[ p ];
            delete prop[ p ];
        }

        val = prop[ name ];

        //获取每个样式的结束值和缓动函数
        if ( jQuery.isArray( val ) ) {                            //如果样式值是一个数组
            opt.animatedProperties[ name ] = val[ 1 ];                //取第二个元素为该样式的缓动函数
            val = prop[ name ] = val[ 0 ];                            //修正第一个元素为该样式的结束值。
        } else {
            opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing';
        }

        if ( val === "hide" && hidden || val === "show" && !hidden ) {    //如果值是hide但当前元素不可见，或者值是show但当前元素可见，表示不需要执行动画就已经完成了
            return opt.complete.call( this );                                 //直接触发完成回调函数。这是一个优化措施
        }

        if ( isElement && ( name === "height" || name === "width" ) ) {    //备份或修正可能影响动画效果的样式，这些样式将在动画完成后被恢复。
            // Make sure that nothing sneaks out
            // Record all 3 overflow attributes because IE does not
            // change the overflow attribute when overflowX and
            // overflowY are set to the same value
            opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];

            // Set display property to inline-block for height/width
            // animations on inline elements that are having width/height animated
            if ( jQuery.css( this, "display" ) === "inline" &&
                    jQuery.css( this, "float" ) === "none" ) {

                // inline-level elements accept inline-block;
                // block-level elements need to be inline with layout
                if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) {
                    this.style.display = "inline-block";

                } else {
                    this.style.zoom = 1;
                }
            }
        }
    }

    if ( opt.overflow != null ) {         //如果opt.overflow不为空，即样式值是width或height、
        this.style.overflow = "hidden";     //则设置样式overflow为'hidden'，即超出部分隐藏，这样不影响其他布局
    }

    for ( p in prop ) {                 //再次遍历动画样式集合prop，为每个属性执行动画效果 p是每个样式名，比如:width、height
        e = new jQuery.fx( this, opt, p );     //调用构造函数jQuery.fn(elem,options,prop)创建一个标准动画对象
        val = prop[ p ];                     //获取设置的结束值，比如:500px,600px

        if ( rfxtypes.test( val ) ) {         //如果样式值val是toggle、show或hide

            // Tracks whether to show or hide based on private
            // data attached to the element
            method = jQuery._data( this, "toggle" + p ) || ( val === "toggle" ? hidden ? "show" : "hide" : 0 );
            if ( method ) {
                jQuery._data( this, "toggle" + p, method === "show" ? "hide" : "show" );
                e[ method ]();
            } else {
                e[ val ]();
            }

        } else {                             //如果样式值是数值型，则计算开始值start、结束值end、单位unit，然后开始执行动画
            parts = rfxnum.exec( val );         //rfxnum用于匹配样式值中的运算符、数值、单位。rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,    格式:Array [ "700px", 符号, "数值", "单位" ] ，比如:'+=20px',匹配后:Array [ "+=20px", "+=", "20", "px" ]
            start = e.cur();                     //获取初始值,比如:200

            if ( parts ) {                         //如果样式值能够匹配正则parts，则说明是数值型，就计算开始值start、结束值end、单位unit，然后开始执行动画。
                end = parseFloat( parts[2] );                                         //end是传入的样式的数值，可能是结束值，也可能要加上或减去的值
                unit = parts[3] || ( jQuery.cssNumber[ p ] ? "" : "px" );             //unit是最后的单位，如果没有传入则设置为px单位

                // We need to compute starting value
                if ( unit !== "px" ) {                                                 //如果结束值的单位不是默认单位px，则将开始值start换算为与结束值end的单位一致的数值。
                    jQuery.style( this, p, (end || 1) + unit);
                    start = ( (end || 1) / e.cur() ) * start;
                    jQuery.style( this, p, start + unit);
                }

                // If a +=/-= token was provided, we're doing a relative animation
                if ( parts[1] ) {                                                     //如果样式值以+= 或 -=开头，则用开始值加上或减去给定的值，
                    end = ( (parts[ 1 ] === "-=" ? -1 : 1) * end ) + start;             //得到结束值
                }
 
                e.custom( start, end, unit );                                         //调用jQuery.fx.prototype.custom(from,to,unit)开始执行动画。start是开始值，end是结束值，unit是单位。

            } else {
                e.custom( start, val, "" );                                     //样式值不是数值型时，仍然开始执行动画，以支持插件扩展的动画样式。
            }
        }
    }

    // For JS strict compliance
    return true;
}

函数内首先调用new jQuery.fx()创建一个$.fx对象，最后调用该对象的custom开始执行动画，$.fx的定义如下:

jQuery.extend({
    fx: function( elem, options, prop ) {         //jQuery构造函数，用于为单个样式构造动画对象。elem:当前匹配元素、options:当前动画的选项集、prop:参与动画的当前样式。
        this.options = options;
        this.elem = elem;
        this.prop = prop;

        options.orig = options.orig || {};
    }
})

就是在当前实例上挂载几个属性，它的其它方法都定义在原型上的，例如cur和custom如下:

jQuery.fx.prototype = {
    // Get the current size
    cur: function() {             //获取this.elem元素this.prop样式当前的值
        if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {     //如果当前DOM元素的this.prop属性不为空，且没有style属性或者有style属性但是style[this.prop]为null
            return this.elem[ this.prop ];                                                                                 //
        }

        var parsed,
            r = jQuery.css( this.elem, this.prop );                             //获取该DOM元素的prop样式的值，比如:200px
        // Empty strings, null, undefined and "auto" are converted to 0,
        // complex values such as "rotate(1rad)" are returned as is,
        // simple values such as "10px" are parsed to Float.
        return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
    },

    // Start an animation from one number to another
    custom: function( from, to, unit ) {                                     //负责开始执行单个样式的动画。from:当前样式的开始值、to:当前样式的结束值、unit:当前样式的单位。
        var self = this,                                                         //self是当前样式的jQuery.fx对象
            fx = jQuery.fx;

        this.startTime = fxNow || createFxNow();                                 //动画开始的时间，值为当前时间，每次调用animate()方法时多个样式的该值是一样的。
        this.end = to;                                                            //当前样式的结束值
        this.now = this.start = from;                                            //当前样式的单位。
        this.pos = this.state = 0;                                                //this.now:当前帧样式值    、this.start:当前样式的开始值
        this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );     //this.pos:差值百分比。this.state:已执行时间的百分比    

        function t( gotoEnd ) {                                                 //构造封装了jQuery.fx.prototype.step()的单帧闭包动画函数，函数t通过闭包机制引用jQuery.fx()对象。
            return self.step( gotoEnd );
        }

        t.queue = this.options.queue;         //动画类型，默认为:fx
        t.elem = this.elem;                 //elem是当前匹配元素
        t.saveState = function() {             //记录当前样式动画的状态，在stop()中用的到
            if ( self.options.hide && jQuery._data( self.elem, "fxshow" + self.prop ) === undefined ) {     
                jQuery._data( self.elem, "fxshow" + self.prop, self.start );
            }
        };

        if ( t() && jQuery.timers.push(t) && !timerId ) {                         //执行单帧闭包动画函数t(gotoEnd)，如果该函数返回true则表示动画尚未完成，则并将其插入全局动画函数数组jQuery.timers中，如果timeId不存在,timeId是执行动画的全局定时器。
            timerId = setInterval( fx.tick, fx.interval );                             //创建一个定时器。周期性的执行jQuery.fx.tick()方法，从而开始执行动画。
        }
    },

$.tick()内会执行setInterval，隔13毫秒就执行一次 t() 函数，t函数内会执行step()函数，该函数会计算匹配元素下一次的样式值，如下:

writer by:大沙漠 QQ:22969969

jQuery.fx.prototype = {
    step: function( gotoEnd ) {             //负责计算和执行当前样式动画的一帧。
        var p, n, complete,
            t = fxNow || createFxNow(),         //t是当前时间
            done = true,
            elem = this.elem,                     //匹配元素
            options = this.options;             //选项

        if ( gotoEnd || t >= options.duration + this.startTime ) {     //动画已完成的逻辑 如果参数totoEnd为true(stop())调用时),或超出了动画完成时间，最后会返回false
            this.now = this.end;                                         //设置当前帧式值为结束值
            this.pos = this.state = 1;                                     //设置已执行时间百分比和差值百分比为1
            this.update();                                                 //调用update()更新样式值。这三行代码是用来修正动画可能导致的样式误差的。

            options.animatedProperties[ this.prop ] = true;             //设置options.animatedProperties[ this.prop ]为true,表示当前样式动画已经执行完成。

            for ( p in options.animatedProperties ) {
                if ( options.animatedProperties[ p ] !== true ) {
                    done = false;
                }
            }

            if ( done ) {
                // Reset the overflow
                if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {

                    jQuery.each( [ "", "X", "Y" ], function( index, value ) {
                        elem.style[ "overflow" + value ] = options.overflow[ index ];
                    });
                }

                // Hide the element if the "hide" operation was done
                if ( options.hide ) {
                    jQuery( elem ).hide();
                }

                // Reset the properties, if the item has been hidden or shown
                if ( options.hide || options.show ) {
                    for ( p in options.animatedProperties ) {
                        jQuery.style( elem, p, options.orig[ p ] );
                        jQuery.removeData( elem, "fxshow" + p, true );
                        // Toggle data is no longer needed
                        jQuery.removeData( elem, "toggle" + p, true );
                    }
                }

                // Execute the complete function
                // in the event that the complete function throws an exception
                // we must ensure it won't be called twice. #5684

                complete = options.complete;
                if ( complete ) {

                    options.complete = false;
                    complete.call( elem );
                }
            }

            return false;

        } else {                                                     //如果当前样式动画尚未完成
            // classical easing cannot be used with an Infinity duration
            if ( options.duration == Infinity ) {
                this.now = t;
            } else {
                n = t - this.startTime;                             //n = 当前时间-开始时间 = 已执行时间
                this.state = n / options.duration;                     //已执行时间百分比 = 已执行时间/运行时间

                // Perform the easing function, defaults to swing
                this.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration );     //差值百分比=缓动函数(已执行时间百分比，已执行时间，0，1，运行时间)
                this.now = this.start + ( (this.end - this.start) * this.pos );                                                 //当前帧样式值=开始值+差值百分比*(结束值-开始值)
            }
            // Perform the next step of the animation
            this.update();                                                                                                         //更新样式值。
        }

        return true;
    }
}

计算出样式值后会将值保存到this.now上面，最终调用this.update()进行更新样式，update源码如下:

jQuery.fx.prototype = {
    update: function() {                 //更新当前样式的值。内部通过jQuery.fx.step中的方法来更新样式的值
        if ( this.options.step ) {                 //如果当前的animate指定了step回调函数
            this.options.step.call( this.elem, this.now, this );     //则调用该回调函数，参数分别是当前样式的值和元素的引用
        }

        ( jQuery.fx.step[ this.prop ] || jQuery.fx.step._default )( this );     //否则调用默认方法jQuery.fx.step._default()直接设置内联样式(style属性)或DOM属性。
    },
}

可以看到优先通过$.fx.step来进行修改样式，其次通过$.fx.step._default来修改，如下:

jQuery.extend( jQuery.fx, {
    step: {                     //最后的步骤:更新样式
        opacity: function( fx ) {         //修正样式opacity的设置行为
            jQuery.style( fx.elem, "opacity", fx.now );
        },

        _default: function( fx ) {         //默认情况下，通过直接设置内联属性(style属性)或DOM属性更新样式值。
            if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {     //如果当前元素有style属性，并且syle含有指定的样式
                fx.elem.style[ fx.prop ] = fx.now + fx.unit;                 //在style属性上设置样式值
            } else {
                fx.elem[ fx.prop ] = fx.now;                               //否则在DOM元素上设置DOM属性，例如:scrollTop、scrollLeft
            }
        }
    }
})

可以看到最终就是修改的元素的style来修改样式的，或者直接修改DOM对象属性。

jQuery 源码解析(三十) 动画模块 $.animate()详解

猜你喜欢