[原创] jQuery源码分析-16动画分析和扩展 Effects

?

16.动画

?

16.1源码解析

?

jquery1.43源码分析之动画部分 http://www.iteye.com/topic/786984

上边这篇文章分析的很透彻，由浅入深，我就不再重复了，下面附两张jQuery 1.6.1的程序执行流程图：

?

?

?

16.2动画支持的属性

jQuery仅支持数值型的属性和特殊标记show/hide/toggle，非数值型的属性需要插件支持。

?

16.3动画算法 jQuery.easing

?

}

?

?

16.4扩展

?

从上面的图（定时器timerId）可以看到，动画的执行进度用执行时间衡量，再由jQuery.easing转换为带特效的进度，最后实际执行样式更新的是jQuery.fx.step，jQuery.easing并不涉及具体的样式值，jQuery的这种低耦合的架构使得无论是扩展属性还是扩展动画，都变得非常方便。

?

1.扩展支持动画的属性 jQuery.fx.step，jQuery自带opacity _default；

?

?颜色 color

颜色的表示方法有rgb(num, num, num)、#RRGGBB、#RGB等，例如rgb(12, 23, 45)、#123456、#123，要产生颜色动画的关键在于，将颜色值转换为可变化的数值型，作为起始值和结束值。

?rgb(num, num, num) 用正则解析其中3个num，放进一个数组中；这样开始值和结束值都变为包含了三个整型元素的数组，step调用时分别计算3个整型元素的当前值，再拼装成颜色值，更新样值就可以实现颜色动画。

?# RRGGBB 是24位色，由6个十六进制数组成，可以分为三部分，第一部分代表红色，第二部分绿色，最后是蓝色，将三部分分别解析成整型，其余部分同rgb(num, num, num)

?#RGB 是# RRGGBB的简写，解析时将每一位重复一次，其余部分同# RRGGBB

?

?旋转 rotate

旋转的效果很酷，配合精美的图片可以做出很玄的网页。旋转的实现关键是兼容IE和非IE，有两种实现方式：使用浏览器自定义接口和canvas标记，因为canvas标记在IE9以下的版本中不支持，需要额外的插件支持，单独再讲，这里先介绍下浏览器自定义接口实现：

?IE: matirx滤镜?

?webkit: elemstyle.webkitTransform = 'rotate(45deg)'

?Opera: Otransform = 'rotate(45deg)'

?firefox: MozTransform = 'rotate(45deg)'

?

2.扩展动画算法 jQuery.easing，jQuery自带linear swing

?

从上边的jQuery.easing 源码分析可以看到，最关键的参数是p，表示已执行时间的百分比，jQueryUI扩展的动画算法以p为输入，经过不同的公式，输出一个具有动画效果的新的进度，这个进度乘以结束值减去开始值的差值，就是当前值。

?

jQueryUI扩展的动画算法 http://jqueryui.com/demos/effect/easing.html