Zepto源码分析-动画(fx fx_method)模块
源码注释
// Zepto.js
// (c) 2010-2015 Thomas Fuchs
// Zepto.js may be freely distributed under the MIT license. ;(function($, undefined){
var prefix = '', eventPrefix, // prefix浏览器前缀 -webkit等,eventPrefix事件前缀
vendors = { Webkit: 'webkit', Moz: '', O: 'o' }, //前缀数据源 不包含IE
testEl = document.createElement('div'), //临时DIV容器
supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i, //变形检测
transform, //变形
transitionProperty, transitionDuration, transitionTiming, transitionDelay,//过渡
animationName, animationDuration, animationTiming, animationDelay, //动画
cssReset = {} //将驼峰字符串转成css属性,如aB-->a-b
function dasherize(str) { return str.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase() }
//修正事件名
function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() } /**
* 根据浏览器内核,设置CSS前缀,事件前缀
* 如-webkit, css:-webkit- event:webkit
* 这里会在vendors存储webkit,moz,o三种前缀
*/
$.each(vendors, function(vendor, event){
if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
prefix = '-' + vendor.toLowerCase() + '-'
eventPrefix = event
return false
}
}) transform = prefix + 'transform' //变形
//过渡
cssReset[transitionProperty = prefix + 'transition-property'] =
cssReset[transitionDuration = prefix + 'transition-duration'] =
cssReset[transitionDelay = prefix + 'transition-delay'] =
cssReset[transitionTiming = prefix + 'transition-timing-function'] =
cssReset[animationName = prefix + 'animation-name'] =
cssReset[animationDuration = prefix + 'animation-duration'] =
cssReset[animationDelay = prefix + 'animation-delay'] =
cssReset[animationTiming = prefix + 'animation-timing-function'] = '' /**
* 动画常量数据源
* @type {{off: boolean, speeds: {_default: number, fast: number, slow: number}, cssPrefix: string, transitionEnd: *, animationEnd: *}}
*/
$.fx = {
off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined), //能力检测是否支持动画,具体检测是否支持过渡,支持过渡事件
speeds: { _default: , fast: , slow: },
cssPrefix: prefix, //css 前缀 如-webkit-
transitionEnd: normalizeEvent('TransitionEnd'), //过渡结束事件
animationEnd: normalizeEvent('AnimationEnd') //动画播放结束事件
} /**
* 创建自定义动画
* @param properties 样式集
* @param duration 持续事件
* @param ease 速率
* @param callback 完成时的回调
* @param delay 动画延迟
* @returns {*}
*/
$.fn.animate = function(properties, duration, ease, callback, delay){
//参数修正,传参为function(properties,callback)
if ($.isFunction(duration))
callback = duration, ease = undefined, duration = undefined
if ($.isFunction(ease)) //传参为function(properties,duration,callback)
callback = ease, ease = undefined
if ($.isPlainObject(duration)) //传参为function(properties,{})
ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration
// duration 数字:持续时间 字符串:取speeds: { _default: 400, fast: 200, slow: 600 }对应数字
if (duration) duration = (typeof duration == 'number' ? duration :
($.fx.speeds[duration] || $.fx.speeds._default)) / //动画持续时间默认值
if (delay) delay = parseFloat(delay) / //延迟时间,除以1000转换成s
return this.anim(properties, duration, ease, callback, delay)
} /**
* 动画核心方法
* @param properties 样式集
* @param duration 持续事件
* @param ease 速率
* @param callback 完成时的回调
* @param delay 动画延迟
* @returns {*}
*/
$.fn.anim = function(properties, duration, ease, callback, delay){
var key, cssValues = {}, cssProperties, transforms = '', // transforms 变形 cssValues设置给DOM的样式
that = this, wrappedCallback, endEvent = $.fx.transitionEnd,
fired = false //修正持续时间
if (duration === undefined) duration = $.fx.speeds._default /
if (delay === undefined) delay = //如果浏览器不支持动画,持续时间设为0,直接跳动画结束
if ($.fx.off) duration = // properties是动画名
if (typeof properties == 'string') {
// keyframe animation
cssValues[animationName] = properties
cssValues[animationDuration] = duration + 's'
cssValues[animationDelay] = delay + 's'
cssValues[animationTiming] = (ease || 'linear')
endEvent = $.fx.animationEnd //动画结束事件
} else { //properties 是样式集
cssProperties = []
// CSS transitions
for (key in properties)
//supportedTransforms.test(key) 正则检测是否为变形
//key + '(' + properties[key] + ') ' 拼凑成变形方法
if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') '
else cssValues[key] = properties[key], cssProperties.push(dasherize(key)) //变形统一存入 cssValues cssProperties
if (transforms) cssValues[transform] = transforms, cssProperties.push(transform) // duration > 0可以播放动画,且properties是对象,表明为过渡,上面有字符串,则为animate
if (duration > && typeof properties === 'object') {
cssValues[transitionProperty] = cssProperties.join(', ')
cssValues[transitionDuration] = duration + 's'
cssValues[transitionDelay] = delay + 's'
cssValues[transitionTiming] = (ease || 'linear') //默认线性速率
}
} //动画完成后的响应函数
wrappedCallback = function(event){
if (typeof event !== 'undefined') {
if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below"
$(event.target).unbind(endEvent, wrappedCallback)
} else
$(this).unbind(endEvent, wrappedCallback) // triggered by setTimeout fired = true
$(this).css(cssReset)
callback && callback.call(this)
} //处理动画结束事件
if (duration > ){
//绑定动画结束事件
this.bind(endEvent, wrappedCallback)
// transitionEnd is not always firing on older Android phones
// so make sure it gets fired //延时ms后执行动画,注意这里加了25ms,保持endEvent,动画先执行完。
//绑定过事件还做延时处理,是transitionEnd在older Android phones不一定触发
setTimeout(function(){
//如果触发过,就不处理
if (fired) return
wrappedCallback.call(that)
}, ((duration + delay) * ) + )
} // trigger page reflow so new elements can animate
//主动触发页面回流,刷新DOM,让接下来设置的动画可以正确播放
//更改 offsetTop、offsetLeft、 offsetWidth、offsetHeight;scrollTop、scrollLeft、scrollWidth、scrollHeight;clientTop、clientLeft、clientWidth、clientHeight;getComputedStyle() 、currentStyle()。这些都会触发回流。回流导致DOM重新渲染,平时要尽可能避免,但这里,为了动画即时生效播放,则主动触发回流,刷新DOM。
this.size() && this.get().clientLeft //设置样式,启动动画
this.css(cssValues) // duration为0,即浏览器不支持动画的情况,直接执行动画结束,执行回调。
if (duration <= ) setTimeout(function() {
that.each(function(){ wrappedCallback.call(this) })
}, ) return this
} testEl = null //去掉不必要的数据存储,便于垃圾回收
})(Zepto)
// Zepto.js
// (c) 2010-2015 Thomas Fuchs
// Zepto.js may be freely distributed under the MIT license. ;(function($, undefined){
var document = window.document, docElem = document.documentElement,
origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle// origShow展示 origHide隐藏 origToggle展示隐藏开关 /**
* 便捷动画的核心方法
* @param el DOM
* @param speed 持续时间
* @param opacity 不透明度
* @param scale 缩放
* @param callback 回调
* @returns {*}
*/
function anim(el, speed, opacity, scale, callback) {
//修正参数 anim(el,callback)
if (typeof speed == 'function' && !callback) callback = speed, speed = undefined
var props = { opacity: opacity }
if (scale) {
props.scale = scale
el.css($.fx.cssPrefix + 'transform-origin', '0 0') //设置变形原点
}
return el.animate(props, speed, null, callback)//不支持速率变化,
} /**
* 底层方法:隐藏显示的元素
* @param el
* @param speed
* @param scale
* @param callback
* @returns {*}
*/
function hide(el, speed, scale, callback) {
//不透明度设为0,即完全透明,相当于隐藏元素。这里的原理是播放不透明-透明的过渡。
//具体代码为 $(dom).animate({opacity: 0, '-webkit-transform-origin': '0px 0px 0px', '-webkit-transform': 'scale(0, 0)' },800)
//设置了变形原点,缩放为0,它就会缩到左上角再透明
return anim(el, speed, , scale, function(){
origHide.call($(this)) //调用隐藏
callback && callback.call(this)
})
} /**
* 显示
* @param speed 持续时间
* @param callback 回调函数
* @returns {*}
*/
$.fn.show = function(speed, callback) {
origShow.call(this)
//具体代码为 $(dom).animate({opacity: 1, '-webkit-transform-origin': '0px 0px 0px', '-webkit-transform': 'scale(1, 1)' },800)
//设置了变形原点,缩放为0,它就会缩到左上角再透明
if (speed === undefined) speed =
else this.css('opacity', )
return anim(this, speed, , '1,1', callback)
} /**
* 隐藏
* @param speed 持续时间
* @param callback 回调函数
* @returns {*}
*/
$.fn.hide = function(speed, callback) {
if (speed === undefined) return origHide.call(this)
else return hide(this, speed, '0,0', callback)
} /**
* 显示、隐藏开关
* @param speed 持续时间
* @param callback 回调函数
* @returns {*}
*/
$.fn.toggle = function(speed, callback) {
if (speed === undefined || typeof speed == 'boolean')
return origToggle.call(this, speed)
else return this.each(function(){
var el = $(this)
el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
})
} /**
* 淡入淡出
* 原理: $(dom).animate({opacity: 1/0, '-webkit-transform-origin': '0px 0px 0px'},800)
* @param speed 持续时间
* @param opacity 不透明度
* @param callback 回调函数
* @returns {*}
*/
$.fn.fadeTo = function(speed, opacity, callback) {
return anim(this, speed, opacity, null, callback)
} /**
* 淡入
* 原理: $(dom).animate({opacity: 1, '-webkit-transform-origin': '0px 0px 0px'},800)
* @param speed 持续时间
* @param callback 回调函数
* @returns {*}
*/
$.fn.fadeIn = function(speed, callback) {
var target = this.css('opacity')
if (target > ) this.css('opacity', )
else target =
return origShow.call(this).fadeTo(speed, target, callback)
} /**
* 淡出
* 原理: $(dom).animate({opacity: 0, '-webkit-transform-origin': '0px 0px 0px'},800)
* @param speed 持续时间
* @param callback 回调函数
* @returns {*}
*/
$.fn.fadeOut = function(speed, callback) {
return hide(this, speed, null, callback)
} /**
* 淡入淡出开关
* @param speed 持续时间
* @param callback 回调函数
* @returns {*}
*/
$.fn.fadeToggle = function(speed, callback) {
return this.each(function(){
var el = $(this)
el[
(el.css('opacity') == || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
](speed, callback)
})
} })(Zepto)
方法图
Zepto源码分析-动画(fx fx_method)模块的更多相关文章
- zepto源码分析系列
如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...
- 一个普通的 Zepto 源码分析(二) - ajax 模块
一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...
- 一个普通的 Zepto 源码分析(三) - event 模块
一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...
- 一个普通的 Zepto 源码分析(一) - ie 与 form 模块
一个普通的 Zepto 源码分析(一) - ie 与 form 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核 ...
- jQuery 源码分析(十) 数据缓存模块 data详解
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...
- jQuery1.9.1源码分析--数据缓存Data模块
jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ...
- Zepto源码分析(一)核心代码分析
本文只分析核心的部分代码,并且在这部分代码有删减,但是不影响代码的正常运行. 目录 * 用闭包封装Zepto * 开始处理细节 * 正式处理数据(获取选择器选择的DOM) * 正式处理数据(添加DOM ...
- Zepto源码分析(二)奇淫技巧总结
Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...
- Hadoop2源码分析-HDFS核心模块分析
1.概述 这篇博客接着<Hadoop2源码分析-RPC机制初识>来讲述,前面我们对MapReduce.序列化.RPC进行了分析和探索,对Hadoop V2的这些模块都有了大致的了解,通过对 ...
随机推荐
- STM32学习笔记(一)——点亮一个LED
引言 最近报名了2017全国大学生电子设计竞赛,我们学校是第一次参加这个比赛,由于8/9月份就要比赛了,所以现在准备是比较晚的了,指导老师说只能做控制类的题目了,让我们学习一下STM32单片机,51到 ...
- CF #312 E. A Simple Task 线段树
题目链接:http://codeforces.com/problemset/problem/558/E 给一个字符串,每次对一个区间内的子串进行升序或者降序的排列,问最后字符串什么样子. 对于字符串排 ...
- 【原创】10万条数据采用存储过程分页实现(Mvc+Dapper+存储过程)
有时候大数据量进行查询操作的时候,查询速度很大强度上可以影响用户体验,因此自己简单写了一个demo,简单总结记录一下: 技术:Mvc4+Dapper+Dapper扩展+Sqlserver 目前主要实现 ...
- java多线程-消费者和生产者模式
/* * 多线程-消费者和生产者模式 * 在实现消费者生产者模式的时候必须要具备两个前提,一是,必须访问的是一个共享资源,二是必须要有线程锁,且锁的是同一个对象 * */ /*资源类中定义了name( ...
- 2017百度web前端实习生在线笔试题
代码: import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner s ...
- 漏洞预警 | Apache Struts2 曝任意代码执行漏洞 (S2-045)
近日,Apache官方发布Apache Struts 2.3.5–2.3.31版本及2.5–2.5.10版本存在远程代码执行漏洞(CNNVD-201703-152 ,CVE-2017-5638)的紧急 ...
- C# Redis学习系列三:Redis配置主从
Redis配置主从 主IP :端口 192.168.0.103 6666 从IP:端口 192.168.0.108 3333 配置从库 (1)安装服务: redis-server ...
- apache代理转发
打开apache安装目录的conf文件夹下的httpd.conf1.将以下两行前的注释字符 # 去掉:#LoadModule proxy_module modules/mod_proxy.so#Loa ...
- $>_<$
Hello word! 从jdk环境变量的配置,myeclipse的安装,tomcat的部署和使用,面向对象的编程思想,什么是java. 思维从模糊到清晰,一路摸索,不见泰山!
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...