讀Zepto源碼之fx_methods模塊

junbaor 發(fā)布于2019-08-21 16:59 / 2595人閱讀

摘要：所以模塊依賴于模塊，在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調(diào)用原有的方法，將元素顯示出來，這是實(shí)現(xiàn)動(dòng)畫的基本條件。如果沒有傳遞，或者為值，則表示不需要?jiǎng)赢?，調(diào)用原有的方法即可。

fx 模塊提供了 animate 動(dòng)畫方法，fx_methods 利用 animate 方法，提供一些常用的動(dòng)畫方法。所以 fx_methods 模塊依賴于 fx 模塊，在引入 fx_methods 前必須引入 fx 模塊。

讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto

源碼版本

本文閱讀的源碼為 zepto1.2.0

GitBook

《reading-zepto》

內(nèi)部方法 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 的參數(shù)類型為函數(shù)，并且 callback 沒有傳遞，則認(rèn)為 speed 位置的參數(shù)為 callback。

props 是過渡的屬性， fx_fethods 主要實(shí)現(xiàn) show 、 hide 和 fadeIn、 fadeOut 等動(dòng)畫，用到的過渡屬性為 opecity 和 scale 。

當(dāng)為 scale 時(shí)，將轉(zhuǎn)換的原點(diǎn)設(shè)置為 0 0。

最后調(diào)用的是 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 方法其實(shí)就是將 opacity 的屬性設(shè)置為 0 。在動(dòng)畫完成后，調(diào)用 origHide 方法，即原有的 hide 方法，將元素的 display 設(shè)置為 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 方法首先調(diào)用原有的 hide 方法，將元素顯示出來，這是實(shí)現(xiàn)動(dòng)畫的基本條件。

如果沒有設(shè)置 speed，表示不需要?jiǎng)赢?，則過渡時(shí)間 speed 設(shè)置為 0。立即顯示元素。

否則，先將 opactity 設(shè)置為 0，再調(diào)用 anim 方法執(zhí)行動(dòng)畫。opacity 設(shè)置為 0 也是執(zhí)行動(dòng)畫的關(guān)鍵，從 0 變?yōu)?1 才有過渡的效果。

.hide()

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

如果 speed 沒有傳遞，簡(jiǎn)單調(diào)用原有的 hide 方法即可，因?yàn)椴恍枰^渡效果。

否則調(diào)用內(nèi)部方法 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 值，則表示不需要?jiǎng)赢?，調(diào)用原有的 toggle 方法即可。為什么要有一個(gè) boolean 值的判斷呢，這要看回《讀Zepto源碼之樣式操作》關(guān)于 toggle 方法的分析了，原有的 toggle 方法接收一個(gè)參數(shù)，如果為 true，則指定調(diào)用 show 方法，否則調(diào)用 hide 方法。

否則，判斷每個(gè)元素的 display 屬性值，如果為 none，則調(diào)用 show 方法顯示，否則調(diào)用 hide 方法隱藏。

.fadeTo()

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

fadeTo 可以其實(shí)是通過調(diào)節(jié)過渡時(shí)間 speed 和透明度 opacity 來實(shí)現(xiàn)動(dòng)畫效果。

和 show 和 hide 不同的是，fadeTo 的 opacity 不一定為 1 或者 0，可以由調(diào)用者指定。

.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 其實(shí)調(diào)用的是 fadeTo ，跟 show 有點(diǎn)類似，最終將 opacity 變?yōu)?1 。只是不處理 scale 變形。

.fadeOut()

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

淡出。

fadeOut 調(diào)用的是 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 時(shí)，調(diào)用 fadeIn 方法顯示，否則調(diào)用 fadeOut 方法隱藏。

系列文章

讀Zepto源碼之代碼結(jié)構(gòu)

讀Zepto源碼之內(nèi)部方法

讀Zepto源碼之工具函數(shù)

讀Zepto源碼之神奇的$

讀Zepto源碼之集合操作

讀Zepto源碼之集合元素查找

讀Zepto源碼之操作DOM

讀Zepto源碼之樣式操作

讀Zepto源碼之屬性操作

讀Zepto源碼之Event模塊

讀Zepto源碼之IE模塊

讀Zepto源碼之Callbacks模塊

讀Zepto源碼之Deferred模塊

讀Zepto源碼之Ajax模塊

讀Zepto源碼之Assets模塊

讀Zepto源碼之Selector模塊

讀Zepto源碼之Touch模塊

讀Zepto源碼之Gesture模塊

讀Zepto源碼之IOS3模塊

讀Zepto源碼之Fx模塊

參考 License

署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際 (CC BY-NC-ND 4.0)

最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注,歡迎提意見：

作者：對(duì)角另一面

GPU云服務(wù)器云服務(wù)器讀源碼源碼中文說明之源碼編譯模塊 linux 模塊源碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88984.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

junbaor

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow原理

閱讀 1649·2023-04-25 18:19
#萬圣節(jié)優(yōu)惠#Friendhosting：多國(guó)機(jī)房VPS全場(chǎng)5折優(yōu)惠，100Mbps不限流量，虛擬主

閱讀 2093·2021-10-26 09:48
使用Python控制手機(jī)

閱讀 1100·2021-10-09 09:44
博鰲云：香港站群服務(wù)器促銷;E3/8G/240 GB SSD或1TB HDD/10M CN2 BGP

閱讀 1748·2021-09-09 11:35
兩個(gè)viewport的故事-桌面版(譯)

閱讀 3041·2019-08-30 15:54
我討厭你公事公辦的樣子

閱讀 2039·2019-08-30 11:26
移動(dòng)端優(yōu)先的flex三欄布局

閱讀 2299·2019-08-29 17:06
CSS偽類的實(shí)例

閱讀 895·2019-08-29 16:38

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

讀Zepto源碼之fx_methods模塊

相關(guān)文章

**讀Zepto源碼之Stack模塊**

**讀Zepto源碼之Form模塊**

**讀Zepto源碼之Data模塊**

記一次頁(yè)面卡頓排查

2017-10-12 前端日?qǐng)?bào)

發(fā)表評(píng)論

0條評(píng)論

junbaor

男|高級(jí)講師

TA的文章

tensorflow原理

#萬圣節(jié)優(yōu)惠#Friendhosting：多國(guó)機(jī)房VPS全場(chǎng)5折優(yōu)惠，100Mbps不限流量，虛擬主

使用Python控制手機(jī)

博鰲云：香港站群服務(wù)器促銷;E3/8G/240 GB SSD或1TB HDD/10M CN2 BGP

兩個(gè)viewport的故事-桌面版(譯)

我討厭你公事公辦的樣子

移動(dòng)端優(yōu)先的flex三欄布局

CSS偽類的實(shí)例

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

讀Zepto源碼之fx_methods模塊

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！