欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-27 16:47:36
...

 

16. 动画

 

16.1 源码解析

 

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

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

 


[原创] jQuery源码分析-16动画分析和扩展 Effects
            
    
    博客分类: jQuery jqueryanimateeasingstep


[原创] jQuery源码分析-16动画分析和扩展 Effects
            
    
    博客分类: jQuery jqueryanimateeasingstep

 

 

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


  • [原创] jQuery源码分析-16动画分析和扩展 Effects
            
    
    博客分类: jQuery jqueryanimateeasingstep
  • 大小: 51 KB
  • [原创] jQuery源码分析-16动画分析和扩展 Effects
            
    
    博客分类: jQuery jqueryanimateeasingstep
  • 大小: 65.1 KB