读Zepto源码之fx_methods模块

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 主要实现 show 、 hide 和 fadeIn、 fadeOut 等动画，用到的过渡属性为 opecity 和 scale 。

当为 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 方法是 show 和 hide 方法的切换。

如果 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 来实现动画效果。

和 show 和 hide 不同的是，fadeTo 的 opacity 不一定为 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)
  })
}

切换淡入淡出效果。

如果 display 为 node 时，调用 fadeIn 方法显示，否则调用 fadeOut 方法隐藏。

系列文章

1. 读Zepto源码之代码结构
2. 读Zepto源码之内部方法
3. 读Zepto源码之工具函数
4. 读Zepto源码之神奇的$
5. 读Zepto源码之集合操作
6. 读Zepto源码之集合元素查找
7. 读Zepto源码之操作DOM
8. 读Zepto源码之样式操作
9. 读Zepto源码之属性操作
10. 读Zepto源码之Event模块
11. 读Zepto源码之IE模块
12. 读Zepto源码之Callbacks模块
13. 读Zepto源码之Deferred模块
14. 读Zepto源码之Ajax模块
15. 读Zepto源码之Assets模块
16. 读Zepto源码之Selector模块
17. 读Zepto源码之Touch模块
18. 读Zepto源码之Gesture模块
19. 读Zepto源码之IOS3模块
20. 读Zepto源码之Fx模块

参考

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

作者：对角另一面