jQuery1.9.1源码分析系列（十五)之动画处理资源-CSDN文库

135 浏览量 2020-11-22 09:24:23 上传评论收藏 194KB PDF 举报

资源推荐

资源详情

资源评论

jQuery 1.9.1源码分析系列（十五源码分析系列（十五)之动画处理之动画处理

首先需要有队列（queue）的基本知识。见上一章。

相关教程：jQuery下的动画处理总结： //www.jb51.net/article/42000.htm

jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween ：//www.jb51.net/article/75821.htm

a.动画入口jQuery.fn.animate函数执行流程详解

——————————————————————————–

　　先根据参数调用jQuery.speed获取动画相关参数，得到一个类似如下的对象；并且生成动画执行函数doAnimation

optall = {

complete: fnction(){...},//动画执行完成的回调

duration: 400,//动画执行时长

easing: "swing",//动画效果

queue: "fx",//动画队列

old: false/fnction(){...},

}

var empty = jQuery.isEmptyObject( prop ),

optall = jQuery.speed( speed, easing, callback ),

doAnimation = function() {

//在特征的副本上操作，保证每个特征效果不会被丢失

var anim = Animation( this, jQuery.extend( {}, prop ), optall );

doAnimation.finish = function() {

anim.stop( true );

};

//空动画或完成需要立马解决

if ( empty || jQuery._data( this, "finish" ) ) {

anim.stop( true );

}

};

doAnimation.finish = doAnimation;

　　没有动画正在执行则马上执行动画，否则将动画压入动画队列等待执行

//没有动画在执行则马上执行动画，否则将动画压入动画队列等待执行

return empty || optall.queue === false ?

this.each( doAnimation ) :

this.queue( optall.queue, doAnimation );

　　可以看出，真正执行动画的地方是Animation( this, jQuery.extend( {}, prop ), optall )函数

b. jQuery内部函数Animation详解

——————————————————————————–

　　Animation ( elem, properties, options ). properties是要进行动画的css特征，options是动画相关选项{complete: function

() {…},duration: 400,easing: undefined,old: false,queue: “fx”}。

　　首先　首先,初始化一个延时对象，这个延时对象用来处理动画队列。初始化一个延时对象，这个延时对象用来处理动画队列。

deferred = jQuery.Deferred().always( function() {

// don't match elem in the :animated selector

delete tick.elem;

}),

　　然后，生成一个每一个时间点（相邻两个时间点的事件间隔默认为　然后，生成一个每一个时间点（相邻两个时间点的事件间隔默认为13毫秒）上都会执行的函数毫秒）上都会执行的函数tick，这个，这个tick函数会保存函数会保存

在在jQuery.timers中，然后每次执行中，然后每次执行jQuery.fx.tick的时候会取出来执行。的时候会取出来执行。

tick = function() {

if ( stopped ) {

return false;

}

var currentTime = fxNow || createFxNow(),

remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),

// archaic crash bug won't allow us to use 1 - ( 0.5 || 0 ) (#12497)

temp = remaining / animation.duration || 0,

percent = 1 - temp,

index = 0,

length = animation.tweens.length;

//执行动画效果

for ( ; index < length ; index++ ) {

animation.tweens[ index ].run( percent );

}

//生成进度报告

deferred.notifyWith( elem, [ animation, percent, remaining ]);

if ( percent < 1 && length ) {

return remaining;

} else {

//动画执行完毕，执行所有延时队列中的函数（包括清除动画相关的数据）

deferred.resolveWith( elem, [ animation ] );

return false;

}

　　我们看到jQuery对动画进度的处理：

remaining = Math.max( 0, animation.startTime + animation.duration - currentTime )temp = remaining / animation.duration || 0,percent = 1 - temp,

　　进度百分比 = 1 – 剩余时间百分比。

　　平常我们是这么处理:假设时间13毫秒执行一次动画，当前是第n此执行，总的动画时长为T。那么

　　进度百分比 = (n*13)/T

　　实际上这种算法得到的时间n*13是不准确的，因为cpu不只是你一个程序在执行，时间片分给你的时候往往都比n*13大。

而且是一个很不准确的值，导致动画感觉时快时慢，不连贯。而jQuery这种方式保证当前的事件点上动画执行结果的准确性，

毕竟事件是最新计算结果。

　　第三，生成动画用的所有特征组成的对象第三，生成动画用的所有特征组成的对象animation（这个对象结构如源码所示），（这个对象结构如源码所示），animation.props中保存的是用户传中保存的是用户传

入的特征（动画最终目标）。入的特征（动画最终目标）。

animation = deferred.promise({

elem: elem,

props: jQuery.extend( {}, properties ),

opts: jQuery.extend( true, { specialEasing: {} }, options ),

originalProperties: properties,

originalOptions: options,

startTime: fxNow || createFxNow(),

duration: options.duration,

tweens: [],

createTween: function( prop, end ) {

var tween = jQuery.Tween( elem, animation.opts, prop, end,

animation.opts.specialEasing[ prop ] || animation.opts.easing );

animation.tweens.push( tween );

return tween;

stop: function( gotoEnd ) {

var index = 0,

// if we are going to the end, we want to run all the tweens

// otherwise we skip this part

length = gotoEnd ? animation.tweens.length : 0;

if ( stopped ) {

return this;

}

stopped = true;

for ( ; index < length ; index++ ) {

animation.tweens[ index ].run( 1 );

}

// resolve when we played the last frame

// otherwise, reject

if ( gotoEnd ) {

deferred.resolveWith( elem, [ animation, gotoEnd ] );

} else {

deferred.rejectWith( elem, [ animation, gotoEnd ] );

}

return this;

}

})

　　第四，调用　　第四，调用propFilter修正修正css特征名称以便能被浏览器识别，其中需要注意的是特征名称以便能被浏览器识别，其中需要注意的是borderWidth/padding/margin指的不指的不

是一个是一个css特征，而是四个（上下左右）特征，而是四个（上下左右）

//经过propFilter，animation.opts.specialEasing添加了相应的特征

propFilter( props, animation.opts.specialEasing );

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38653443

粉丝: 9
资源: 901

jQuery 1.9.1源码分析系列（十五)之动画处理

最新资源

jQuery 1.9.1源码分析系列（十五)之动画处理

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

Jquery1.9.1的源码

Jquery1.9.1源码分析系列（十五）动画处理之外篇

jQuery 1.9.1源码分析系列（十三）之位置大小操作

jquery的动画效果

Jquery1.9.1

jQuery动画

jquery动画

JQuery 动画

jQuery 1.9.1源码分析系列（十四）之常用jQuery工具

Jquery 1.9.1源码分析系列（十二）之筛选操作

dojo-release-1.9.1-src

jQuery新闻图片上下滚动切换代码.zip

jQuery星级评价打分代码.zip

jQuery 1.9.1源码分析系列（十）事件系统之绑定事件

jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构

jQuery之动画效果大全

基于jquery的动画效果代码

jquery-1.9.0

jQuery部分酷炫动画代码

jQuery操作动画完整实例分析

jQuery内容搜索筛选提示代码.zip

jQuery产品展示全屏焦点图轮播代码.zip

最新资源