讀Zepto原始碼之fx_methods模組

對角發表於2017-10-11
原始碼

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)

最後，所有文章都會同步傳送到微信公眾號上，歡迎關注,歡迎提意見：

作者：對角另一面

相關文章