[原创] 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

 

jQuery自带了线性动画linear、余弦动画swing，下边是源码分析：

/**

* 如果要扩展动画效果，则扩展这个属性jQuery.easing

 */

easing: {

    /**

     * 线性

     * p 完成时间百分比

     * n 已执行时间

     * firstNum 0 起始偏移百分比

     * diff 1 结束偏移百分比

     * 通常情况下，等于直接返回p

     * 动画效果：匀速运动

     */

    linear: function( p, n, firstNum, diff ) {

       return firstNum + diff * p;

    },

    /**

     * http://baike.baidu.com/view/303443.htm

     * 余弦

     * -Math.cos(p*Math.PI) -1~1

     * ( ( -Math.cos(p*Math.PI)/2 ) + 0.5 ) 0~1

     * 根据余弦图，最终的动画效果是：慢>快>慢

     */

    swing: function( p, n, firstNum, diff ) {

       return ( ( -Math.cos(p*Math.PI)/2 ) + 0.5 ) * diff + firstNum;

    }

}

 

 

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