jQuery源码解析之$().animate()（上）

Batkid 发布于2019-08-23 18:20 / 1323人阅读

摘要：前言需要先看源码解析之和一举例的宽度先变成，再变成，最后变成这是在异步调用中，进行同步调用动画是异步的就是连续调用二作用通过样式将元素从一个状态改变为另一个状态源码之前有说过是的方法源码行是否是空对象，方法执行单个动画的封装的本质是执行

前言：
需要先看 jQuery源码解析之$.queue()、$.dequeue()和jQuery.Callbacks()

一、举例
divA 的宽度先变成 500px，再变成 300px，最后变成 1000px：


  这是A

二、$().animate()
作用：
通过 CSS 样式将元素从一个状态改变为另一个状态

源码：

</>code
  //之前有说过： jQuery.fn.extend() 是$()的方法
  jQuery.fn.extend( {
   //源码8062行
    //{"width": "500"}
    animate: function( prop, speed, easing, callback ) {
      //是否是空对象，false
      var empty = jQuery.isEmptyObject( prop ),
        // optall={
        //   complete:function(){jQuery.dequeue()},
        //   old:false,
        //   duration: 400,
        //   easing: undefined,
        //   queue:"fx",
        // }
        
        //undefined undefined undefined
        optall = jQuery.speed( speed, easing, callback ),
        doAnimation = function() {
         
          // Operate on a copy of prop so per-property easing won"t be lost
          //Animation 方法执行单个动画的封装
          //doAnimation的本质是执行Animation方法
          //this:目标元素
          //{"width": "500"}
          //optall={xxx}
          var anim = Animation( this, jQuery.extend( {}, prop ), optall );
          // Empty animations, or finishing resolves immediately
          //finish是数据缓存的一个全局变量
          //如果为true，立即终止动画
          if ( empty || dataPriv.get( this, "finish" ) ) {
            anim.stop( true );
          }
        };
      //注意这个
      //自身的.finish=自身
      doAnimation.finish = doAnimation;
      return empty || optall.queue === false ?
        this.each( doAnimation ) :
        //一般走这里
        //通过 queue 调度动画之间的衔接
        //optall.queue:"fx"
        //doAnimation:function(){}
        this.queue( optall.queue, doAnimation );
    },
  })

解析：
（1）jQuery.speed()
作用：
初始化动画对象的属性

源码：

</>code
  //源码8009行
  //undefiend undefined undefined
  //作用是返回一个经过修改的opt对象
  jQuery.speed = function( speed, easing, fn ) {
    // opt={
    //   complete:false,
    //   duration: undefined,
    //   easing: undefined,
    // }
    var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
      complete: fn || !fn && easing ||
        isFunction( speed ) && speed,
      duration: speed,
      easing: fn && easing || easing && !isFunction( easing ) && easing
    };
    
    // Go to the end state if fx are off
    /*这边是为opt.duration赋值的*/
    //undefiend
    if ( jQuery.fx.off ) {
      opt.duration = 0;
    } else {
      if ( typeof opt.duration !== "number" ) {
        if ( opt.duration in jQuery.fx.speeds ) {
          opt.duration = jQuery.fx.speeds[ opt.duration ];
        } else {
          //走这边
          //_default=400
          opt.duration = jQuery.fx.speeds._default;
        }
      }
    }
    /*为opt.queue赋值*/
    // Normalize opt.queue - true/undefined/null -> "fx"
    //注意这个==，是模糊判断
    if ( opt.queue == null || opt.queue === true ) {
      opt.queue = "fx";
    }
    // Queueing
    /*为opt.old赋值*/
    opt.old = opt.complete;
    opt.complete = function() {
      if ( isFunction( opt.old ) ) {
        opt.old.call( this );
      }
      //如果queue有值得话，就出队列
      //因为queue默认为"fx"，所以一般会触发dequeue操作
      if ( opt.queue ) {
        //this指目标元素
        //opt.queue
        jQuery.dequeue( this, opt.queue );
      }
    };
    //此时的opt为：
    // opt={
    //   complete:function(){jQuery.dequeue()},
    //   old:false,
    //   duration: 400,
    //   easing: undefined,
    //   queue:"fx",
    // }
    return opt;
  };

解析：
通过传入的三个参数，对opt对象进行处理，如果三个参数都为undefined的话，opt等于：

</>code
   opt={
       complete:function(){jQuery.dequeue()},
       old:false,
       duration: 400,
       easing: undefined,
       queue:"fx",
   }

（2）animate内部做了什么？
作用：
animate内部封装了一个doAnimation触发器，触发器触发就会运行Animation方法，animate最后返回的是queue()方法，注意queue()方法的参数带有触发器doAnimation

（3）$().queue()
作用：
执行入队操作（jQuery.queue()），如果是fx动画的话，同时执行出队操作（jQuery.dequeue()）

源码
这个方法上篇文章已经分析过了，这里就简单分析下：

</>code
  jQuery.fn.extend( {
    //optall.queue:"fx"
    //doAnimation:function(){}
    //fx动画的话，就执行dequeue()，也就是队首callback函数
    queue: function( type, data ) {
          //返回的是数组[doAnimate,doAnimate,xxx]
          var queue = jQuery.queue( this, type, data );
 
          //初始化hooks
          jQuery._queueHooks( this, type );
          /*专门为fx动画做处理*/
          //如果队首没有锁的话，直接运行队首元素
          if ( type === "fx" && queue[ 0 ] !== "inprogress" ) {
            jQuery.dequeue( this, type );
          }
    },

解析：
inprogress是动画队列的锁，目的是保证上个动画执行结束后，再去执行下个动画

每入队一个doAnimate函数，如果队首没有inprogress 锁的话，就会出队去运行一个doAnimate函数

jQuery._queueHooks()的意义在于添加一个empty.remove()方法，用来清空队列queue

（4）jQuery.queue()
作用：
上篇文章也分析过了，就是将doAnimate函数push进queue数组中

（5）jQuery.dequeue()
作用：
如果队首元素不是inprogress，而是doAnimation方法，则先将doAnimation出队，再让inprogress入队首，再运行doAnimation方法；
如果队首元素是inprogress的话，则移除锁

如果队列为空的话，则清空queue，节省内存

源码：

</>code
   //源码4624行
    //目标元素，"type"
    dequeue: function( elem, type ) {
      //"type"
      type = type || "fx";
      //get，获取目标元素的队列
      var queue = jQuery.queue( elem, type ),
        //长度
        startLength = queue.length,
        //去除对首元素，并返回该元素
        fn = queue.shift(),
        //确保该队列有一个hooks
        hooks = jQuery._queueHooks( elem, type ),
        //next相当于dequeue的触发器
        next = function() {
          jQuery.dequeue( elem, type );
        };
      // If the fx queue is dequeued, always remove the progress sentinel
      //如果fn="inprogress"，说明是fx动画队列正在出队，就移除inprogress
      if ( fn === "inprogress" ) {
        fn = queue.shift();
        startLength--;
      }
      if ( fn ) {
        // Add a progress sentinel to prevent the fx queue from being
        // automatically dequeued
        //如果是fx动画队列的话，就添加inprogress标志，来防止自动出队执行
        //意思应该是等上一个动画执行完毕后，再执行下一个动画
        if ( type === "fx" ) {
          queue.unshift( "inprogress" );
        }
        // Clear up the last queue stop function
        //删除hooks的stop属性方法
        delete hooks.stop;
        //递归dequeue方法
        fn.call( elem, next, hooks );
      }
      console.log(startLength,"startLength4669")
      //如果队列是一个空数组，并且hooks存在的话，清除该队列
      if ( !startLength && hooks ) {
        //进行队列清理
        hooks.empty.fire();
        console.log(hooks.empty.fire(),"bbbb4671")
      }
    },

解析：
循环同步运行多个doAnimation()方法，直到队列为空

综上，除doAnimation内的逻辑外，整个$().animate()的流程图为：

GPU云服务器云服务器 jquery中animate用法源码中文说明之 jquery插件源码jquery jquery源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105057.html

jQuery源码解析之$().animate()（下）

摘要：根据的间隔，利用循环执行，从而达到渲染动画的目的。最后，附上的流程图，建议配合整个的流程图二的最后一个图一起看下篇将会模拟实现方法，敬请期待完三、doAnimation内部的Animation()方法作用：$().animate()核心方法源码： //animate()核心方法 //源码7844行 //elem:目标元素 //this:目标元素 //{widt...

raledong 2019-08-23 18:20 评论0 收藏0
jQuery之模拟实现$().animate()（上）

摘要：事件在完成过渡后触发，这里当做单个动画完成的信号，触发后，会告知下个动画进行下图的实现将在下篇文章贴出完 showImg(https://segmentfault.com/img/remote/1460000019618970); showImg(https://segmentfault.com/img/remote/1460000019618971); 根据上图实现除doAnimat...

lcodecorex 2019-08-23 18:23 评论0 收藏0

发表评论

登陆后可评论

0条评论

Batkid

男|高级讲师

我要关注我要私信

TA的文章

张老师的小测试

阅读 610·2019-08-30 15:55
前端面试笔试题（二）

阅读 1024·2019-08-29 15:35
Google LOGO的CSS Sprite

阅读 1280·2019-08-29 13:48
YodaOS：一个属于 Node.js 社区的操作系统

阅读 2012·2019-08-26 13:29
为vue3学点typescript(1), 体验typescript

阅读 3025·2019-08-23 18:26
jQuery源码解析之$().animate()（上）

阅读 1324·2019-08-23 18:20
灵活使用 console 让 js 调试更简单

阅读 2913·2019-08-23 16:43
return/break语句的妙用

阅读 2772·2019-08-23 15:58

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

jQuery源码解析之$().animate()（上）

</>code

</>code

</>code

</>code

</>code

相关文章

jQuery源码解析之$().animate()（下）

jQuery之模拟实现$().animate()（上）

发表评论

0条评论

Batkid

男|高级讲师

TA的文章

张老师的小测试

前端面试笔试题（二）

Google LOGO的CSS Sprite

YodaOS：一个属于 Node.js 社区的操作系统

为vue3学点typescript(1), 体验typescript

jQuery源码解析之$().animate()（上）

灵活使用 console 让 js 调试更简单

return/break语句的妙用

最新活动