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
- 大小: 51 KB
- 大小: 65.1 KB
分享到:
相关推荐
jQuery源码分析-插件
jQuery源码分析-初步
jQuery源码分析-事件(1).
jQuery源码分析-魔术方法
jQuery源码分析-03构造jQuery对象
jQuery源码分析-02正则表达式
jQuery源码分析-事件(2).
139.jQuery源码分析-魔术方法.rar
jQuery-, jQuery源码解读 -- jQuery v1.10.2
NULL 博文链接:https://nuysoft.iteye.com/blog/1189156
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
NULL 博文链接:https://nuysoft.iteye.com/blog/1198058
jquery插件jquery-ui-1.8.2.custom.min.js
Jquery源码分析 清晰 Jquery源码分析 清晰 Jquery源码分析 清晰 Jquery源码分析 清晰
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
NULL 博文链接:https://nuysoft.iteye.com/blog/1195313
NULL 博文链接:https://nuysoft.iteye.com/blog/1195296
jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。