读Zepto源码之fx_methods模块

柔光的暖阳◎ 2022-06-07 05:35 416阅读 0赞

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

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

## 源码版本 ##

本文阅读的源码为 [zepto1.2.0][]

## GitBook ##

《[reading-zepto][reading-zepto 1]》

## 内部方法 ##

### 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源码之样式操作][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源码之样式操作][Zepto 1]》关于 `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源码之代码结构][Zepto 2]
2.  [读Zepto源码之内部方法][Zepto 3]
3.  [读Zepto源码之工具函数][Zepto 4]
4.  [读Zepto源码之神奇的$][Zepto 5]
5.  [读Zepto源码之集合操作][Zepto 6]
6.  [读Zepto源码之集合元素查找][Zepto 7]
7.  [读Zepto源码之操作DOM][Zepto_DOM]
8.  [读Zepto源码之样式操作][Zepto 8]
9.  [读Zepto源码之属性操作][Zepto 9]
10. [读Zepto源码之Event模块][Zepto_Event]
11. [读Zepto源码之IE模块][Zepto_IE]
12. [读Zepto源码之Callbacks模块][Zepto_Callbacks]
13. [读Zepto源码之Deferred模块][Zepto_Deferred]
14. [读Zepto源码之Ajax模块][Zepto_Ajax]
15. [读Zepto源码之Assets模块][Zepto_Assets]
16. [读Zepto源码之Selector模块][Zepto_Selector]
17. [读Zepto源码之Touch模块][Zepto_Touch]
18. [读Zepto源码之Gesture模块][Zepto_Gesture]
19. [读Zepto源码之IOS3模块][Zepto_IOS3]
20. [读Zepto源码之Fx模块][Zepto_Fx]

## 参考 ##

## License ##

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

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见： ![qrcode_front-end-article.jpg][]

作者：对角另一面

[reading-zepto]: https://github.com/yeyuqiudeng/reading-zepto
[zepto1.2.0]: https://github.com/madrobby/zepto/tree/v1.2.0
[reading-zepto 1]: https://yeyuqiudeng.gitbooks.io/reading-zepto/content/
[Zepto]: https://github.com/yeyuqiudeng/reading-zepto/blob/6fb60c6a6ca1cf4f6846c32883774b5ba0f7de45/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E6%A0%B7%E5%BC%8F%E6%93%8D%E4%BD%9C.md#hide
[Zepto 1]: https://github.com/yeyuqiudeng/reading-zepto/blob/6fb60c6a6ca1cf4f6846c32883774b5ba0f7de45/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E6%A0%B7%E5%BC%8F%E6%93%8D%E4%BD%9C.md#toggle
[Zepto 2]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E4%BB%A3%E7%A0%81%E7%BB%93%E6%9E%84.md
[Zepto 3]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E5%86%85%E9%83%A8%E6%96%B9%E6%B3%95.md
[Zepto 4]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0.md
[Zepto 5]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E7%A5%9E%E5%A5%87%E7%9A%84%24.md
[Zepto 6]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E9%9B%86%E5%90%88%E6%93%8D%E4%BD%9C.md
[Zepto 7]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E9%9B%86%E5%90%88%E5%85%83%E7%B4%A0%E6%9F%A5%E6%89%BE.md
[Zepto_DOM]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E6%93%8D%E4%BD%9CDOM.md
[Zepto 8]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E6%A0%B7%E5%BC%8F%E6%93%8D%E4%BD%9C.md
[Zepto 9]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8B%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C.md
[Zepto_Event]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BEvent%E6%A8%A1%E5%9D%97.md
[Zepto_IE]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BIE%E6%A8%A1%E5%9D%97.md
[Zepto_Callbacks]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BCallbacks%E6%A8%A1%E5%9D%97.md
[Zepto_Deferred]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BDeferred%E6%A8%A1%E5%9D%97.md
[Zepto_Ajax]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BAjax%E6%A8%A1%E5%9D%97.md
[Zepto_Assets]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8Bassets%E6%A8%A1%E5%9D%97.md
[Zepto_Selector]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BSelector%E6%A8%A1%E5%9D%97.md
[Zepto_Touch]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BTouch%E6%A8%A1%E5%9D%97.md
[Zepto_Gesture]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BGesture%E6%A8%A1%E5%9D%97.md
[Zepto_IOS3]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BIOS3%E6%A8%A1%E5%9D%97.md
[Zepto_Fx]: https://github.com/yeyuqiudeng/reading-zepto/blob/master/src/%E8%AF%BBZepto%E6%BA%90%E7%A0%81%E4%B9%8BFx%E6%A8%A1%E5%9D%97.md
[-_-_ 4.0 _ _CC BY-NC-ND 4.0]: http://creativecommons.org/licenses/by-nc-nd/4.0/
[qrcode_front-end-article.jpg]: /images/20220607/f321d04fd107490295486c9243e8d135.png