位置: 编程技术 - 正文
jQuery 1.9.1源码分析系列（十五)之动画处理(jquery源码分析)
编辑：rootadmin推荐整理分享jQuery 1.9.1源码分析系列（十五)之动画处理(jquery源码分析)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery源码是什么水平,jquery源码是什么水平,jquery1.8,jquery源码是什么水平,jquery源码是什么水平,jquery源码分析,jquery源码实现原理,jquery源码是什么水平,内容如对您有帮助，希望把文章链接给更多的朋友！
首先需要有队列（queue）的基本知识。见上一章。
相关教程：jQuery下的动画处理总结： 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween ： 先根据参数调用jQuery.speed获取动画相关参数，得到一个类似如下的对象；并且生成动画执行函数doAnimation
没有动画正在执行则马上执行动画，否则将动画压入动画队列等待执行
可以看出，真正执行动画的地方是Animation( this, jQuery.extend( {}, prop ), optall )函数
b. jQuery内部函数Animation详解
--------------------------------------------------------------------------------
Animation ( elem, properties, options ). properties是要进行动画的css特征，options是动画相关选项{complete: function () {…},duration: ,easing: undefined,old: false,queue: "fx"}。
首先,初始化一个延时对象，这个延时对象用来处理动画队列。
然后，生成一个每一个时间点（相邻两个时间点的事件间隔默认为毫秒）上都会执行的函数tick，这个tick函数会保存在jQuery.timers中，然后每次执行jQuery.fx.tick的时候会取出来执行。
我们看到jQuery对动画进度的处理：
进度百分比 = 1 - 剩余时间百分比。
平常我们是这么处理:假设时间毫秒执行一次动画，当前是第n此执行，总的动画时长为T。那么
进度百分比 = (n*)/T
实际上这种算法得到的时间n*是不准确的，因为cpu不只是你一个程序在执行，时间片分给你的时候往往都比n*大。而且是一个很不准确的值，导致动画感觉时快时慢，不连贯。而jQuery这种方式保证当前的事件点上动画执行结果的准确性，毕竟事件是最新计算结果。
第三，生成动画用的所有特征组成的对象animation（这个对象结构如源码所示），animation.props中保存的是用户传入的特征（动画最终目标）。
第四，调用propFilter修正css特征名称以便能被浏览器识别，其中需要注意的是borderWidth/padding/margin指的不是一个css特征，而是四个（上下左右）
举例说明propFilter修正成果。
例1，css特征{ height: }的修正后结果为：
例2:，css特征{margin:}的修正结果为：
第五，调用defaultPrefilter做适配处理:比如对height/width的动画要求display和overflow为特定的值才能有效果；比如对show/hide动画需要对一大堆css特征值进行动画，并且在函数里就调用createTweens生成缓动动画。
其中animationPrefilters[ index ]值得函数就是defaultPrefilter，defaultPrefilter函数处理有几个比较重要的地方
defaultPrefilter重点1：内联元素中height/width相关动画需要设置display特征值为inline-block
defaultPrefilter重点2：对于height/width动画overflow都要设置为"hidden"，动画完成后恢复。这个有利于提高渲染速度。
defaultPrefilter重点3：show/hide动画的特殊处理：show/hide动画调用genFx得到形如
需要进行动画处理的特征压入handled列表，并将相应的特征删除，后面会生成相应的缓动动画。
第六，生成缓动动画，show/hide在defaultPrefilter函数里面已经处理（上面的源码）。
我们来看一看createTweens中具体做了什么，先看一下createTweens之前的animation对象
然后看一下经过createTweens之后的animation对象的tweens数组变成了
将margin分解成了四个属性（marginTop/Right/Bottom/Left）并且每个属性都有自己的动画特征。
第七，启动动画计时,定时执行tick
最后，将传入的动画结束回调加入延时队列
Animation函数流程到此为止
拓展：
前面提到的genFx函数是专门用在toggle、hide、show时获取相关的需要动画的特征的
Animation函数比较复杂，童鞋们可以随便使用例子去跟踪代码。这个是理解jQuery源码的一种比较好的方式。推荐两个例子：
第一个，有hide/show的例子:$("#id").hide();
第二个，其他例子：$("#id").animate({"marginLeft":},);
jQuery 1.9.1源码分析系列（十五)之动画处理 的全部内容就给大家介绍到这里，有问题随时给我留言，谢谢。！
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题 最近做了个项目，其中有一目录功能，发现一个在现代浏览器间的一个bug，或是称之为差异，即页面滚动值(scrollTop)的获取与设定。在此之前先说一下关
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介 触摸事件(touch)在jQueryMobile中有一些触摸事件是可定制的。然而，这些事件仅当与支持触摸功能的设备进行交互的用户访问您的jQueryMobile网站时才可用。
jQuery+jsp下拉框联动获取本地数据的方法(附源码) 本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法。分享给大家供大家参考，具体如下：JQuery下拉框联动很好的体现了Ajax的按需取数据的要求，减
标签: jquery源码分析
本文链接地址:https://www.jiuchutong.com/biancheng/376194.html 转载请保留说明！上一篇：ztree获取选中节点时不能进入可视区域出现BUG如何解决(ztree getnodebytid)
下一篇：详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题(页面滚动到底部)
