IT大道IT大道

首页 >  技术 > 读Zepto源码之fx_methods模块

读Zepto源码之fx_methods模块

原文 http://www.cnblogs.com/hefty/p/7654370.html 2017-10-12 10:39:49 0 评论

fx 模块提供了 animate 动画方法, fx_methods 利用 animate 方法,提供一些常用的动画方法。所以 fx_methods 模块依赖于 fx 模块,在引入 fx_methods 前必须引入 fx 模块。

读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto

源码版本

本文阅读的源码为 zepto1.2.0

GitBook

reading-zepto

内部方法

anim

function anim(el, speed, opacity, scale, 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)
}

如果 speed 的参数类型为函数,并且 callback 没有传递,则认为 speed 位置的参数为 callback

props 是过渡的属性, fx_fethods 主要实现 showhidefadeInfadeOut 等动画,用到的过渡属性为 opecityscale

当为 scale 时,将转换的原点设置为 0 0

最后调用的是 fx 模块中的 animate 方法。

hide

var document = window.document, docElem = document.documentElement,
    origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle
function hide(el, speed, scale, callback) {
  return anim(el, speed, 0, scale, function(){
    origHide.call($(this))
    callback && callback.call(this)
  })
}

hide 方法其实就是将 opacity 的属性设置为 0 。在动画完成后,调用 origHide 方法,即原有的 hide 方法,将元素的 display 设置为 none 。原有的 hide 方法分析见《 读Zepto源码之样式操作

.show()

$.fn.show = function(speed, callback) {
  origShow.call(this)
  if (speed === undefined) speed = 0
  else this.css('opacity', 0)
  return anim(this, speed, 1, '1,1', callback)
}

show 方法首先调用原有的 hide 方法,将元素显示出来,这是实现动画的基本条件。

如果没有设置 speed , 表示不需要动画,则过渡时间 speed 设置为 0 。立即显示元素。

否则,先将 opactity 设置为 0 , 再调用 anim 方法执行动画。 opacity 设置为 0 也是执行动画的关键,从 0 变为 1 才有过渡的效果。

.hide()

$.fn.hide = function(speed, callback) {
  if (speed === undefined) return origHide.call(this)
  else return hide(this, speed, '0,0', callback)
}

如果 speed 没有传递,简单调用原有的 hide 方法即可,因为不需要过渡效果。

否则调用内部方法 hide

.toggle()

$.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)
  })
}

toggle 方法是 showhide 方法的切换。

如果 speed 没有传递,或者为 boolean 值,则表示不需要动画,调用原有的 toggle 方法即可。为什么要有一个 boolean 值的判断呢,这要看回 《 读Zepto源码之样式操作》关于 toggle 方法的分析了,原有的 toggle 方法接收一个参数,如果为 true ,则指定调用 show 方法,否则调用 hide 方法。

否则,判断每个元素的 display 属性值,如果为 none ,则调用 show 方法显示,否则调用 hide 方法隐藏。

.fadeTo()

$.fn.fadeTo = function(speed, opacity, callback) {
  return anim(this, speed, opacity, null, callback)
}

fadeTo 可以其实是通过调节过渡时间 speed 和透明度 opacity 来实现动画效果。

showhide 不同的是, fadeToopacity 不一定为 1 或者 0 , 可以由调用者指定。

.fadeIn()

$.fn.fadeIn = function(speed, callback) {
  var target = this.css('opacity')
  if (target > 0) this.css('opacity', 0)
  else target = 1
  return origShow.call(this).fadeTo(speed, target, callback)
}

淡入效果。

fadeIn 其实调用的是 fadeTo ,跟 show 有点类似,最终将 opacity 变为 1 。只是不处理 scale 变形。

.fadeOut()

$.fn.fadeOut = function(speed, callback) {
  return hide(this, speed, null, callback)
}

淡出。

fadeOut 调用的是 hide 方法,只是不处理 scale 变形。

.fadeToggle()

$.fn.fadeToggle = function(speed, callback) {
  return this.each(function(){
    var el = $(this)
    el[
      (el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
    ](speed, callback)
  })
}

切换淡入淡出效果。

如果 displaynode 时,调用 fadeIn 方法显示,否则调用 fadeOut 方法隐藏。

Tags:Zepto.js

猜你喜欢

标签列表