資訊專(zhuān)欄INFORMATION COLUMN
摘要：的動(dòng)畫(huà)系統(tǒng)就是執(zhí)行一個(gè)函數(shù)隊(duì)列。對(duì)元素應(yīng)用等動(dòng)畫(huà)，都會(huì)默認(rèn)將函數(shù)壓入一個(gè)的隊(duì)列。動(dòng)畫(huà)隊(duì)列向隊(duì)列中添加一個(gè)隊(duì)列函數(shù)，或者替換掉當(dāng)前隊(duì)列。注意不一定是動(dòng)畫(huà)隊(duì)列的最后一個(gè)動(dòng)畫(huà)終態(tài)。還提供了指令來(lái)立即完成整個(gè)動(dòng)畫(huà)隊(duì)列。
動(dòng)畫(huà)隊(duì)列
隊(duì)列的作用就是讓我們把一個(gè)又一個(gè)的任務(wù)放到一起，確保只有當(dāng)前面的任務(wù)完成了，才會(huì)開(kāi)始下一個(gè)任務(wù)。這里面的任務(wù)可以是同步的，也可以是異步的。
jQuery的動(dòng)畫(huà)系統(tǒng)就是執(zhí)行一個(gè)函數(shù)隊(duì)列。對(duì)jQuery元素應(yīng)用fade,slide,animate等動(dòng)畫(huà)，都會(huì)默認(rèn)將函數(shù)壓入一個(gè)fx的隊(duì)列。在我們使用jq的animate()的時(shí)候，我們可以在option參數(shù)中傳入一個(gè)queue的標(biāo)志位來(lái)決定這個(gè)動(dòng)畫(huà)時(shí)候壓入當(dāng)前元素的動(dòng)畫(huà)隊(duì)列。如果為false,則不等待當(dāng)前隊(duì)列完成，而是立即執(zhí)行該動(dòng)畫(huà)。
$element.queue(fun(next)) 讓我們向隊(duì)列中插入一個(gè)函數(shù)，當(dāng)我們向一個(gè)空隊(duì)列或者插入函數(shù)的時(shí)候，該函數(shù)會(huì)立即執(zhí)行。否則將排到隊(duì)尾執(zhí)行。插入的這個(gè)函數(shù)fun可以執(zhí)行一個(gè)同步或者異步的任務(wù)，但是不論是同步還是異步任務(wù)，如果我們想讓排在fun后面的隊(duì)列函數(shù)能夠執(zhí)行，都不要忘了在同步/異步任務(wù)完成之后使用next()。這個(gè)next 是jQuery的隊(duì)列系統(tǒng)在調(diào)用fun的時(shí)候傳入的，它是一個(gè)函數(shù)，執(zhí)行它就可以讓隊(duì)列繼續(xù)執(zhí)行。
jQuery動(dòng)畫(huà)隊(duì)列Api.queue(): 向隊(duì)列中添加一個(gè)隊(duì)列函數(shù)，或者替換掉當(dāng)前隊(duì)列。速查
.dequeue(): 當(dāng)我們替換了一個(gè)新隊(duì)列之后，或者使用.stop 停止一個(gè)隊(duì)列之后，我們需要這個(gè)函數(shù)來(lái)重新啟動(dòng)隊(duì)列。速查
.stop(): 停止當(dāng)前隊(duì)列中正在進(jìn)行的任務(wù)。它還接收一個(gè) jumptoend的參數(shù),如果傳入true,則直接跳到當(dāng)前動(dòng)畫(huà)的終態(tài)。注意不一定是動(dòng)畫(huà)隊(duì)列的最后一個(gè)動(dòng)畫(huà)終態(tài)。速查
.delay()：設(shè)置一個(gè)延時(shí)來(lái)讓隊(duì)列延遲執(zhí)行。
以前比較老的版本的jQuery的動(dòng)畫(huà)是使用定時(shí)器來(lái)完成的，新版本的jQuery增加了一項(xiàng)判斷，如果瀏覽器支持window.requestAnimationFrame,則會(huì)使用window.requestAnimationFrame.
jQuery 的動(dòng)畫(huà)性能在移動(dòng)端表現(xiàn)不佳，因?yàn)槎〞r(shí)器或者其他的問(wèn)題。velocity是一款性能更好的動(dòng)畫(huà)庫(kù)。官方文檔的介紹也多次強(qiáng)調(diào)它的快，甚至要超過(guò)css3 transition了。它的api設(shè)計(jì)和jQuery.animate差不多一樣，其中動(dòng)畫(huà)隊(duì)列的用法也和jQuery.queue一樣。它可以和jQuery一起使用。當(dāng)不引用jQuery時(shí)，Velocity時(shí)掛載在window對(duì)象中的，當(dāng)引用jQuery的時(shí)候，就掛載在jQuery對(duì)象下。只需在原先使用$.aniamte()的地方替換成$.velocity()，就切換到了velocity動(dòng)畫(huà)庫(kù)。
velocity 兼容velocity.js v2.0版本 官方目前支持IE11, Edge, Chrome, Safari, and Firefox。（我自己用的時(shí)候，V2.0在IE11，edge會(huì)報(bào)錯(cuò)。）。所以一般用V1.5。(兼容性好了，性能就要犧牲一點(diǎn)。)而且在如果要支持到IE8,就必須引入jQuery1.X版本。
velocity 特性它支持屬性值函數(shù)，顏色動(dòng)畫(huà)，CSS3的transform,scroll(頁(yè)面或者元素的滾動(dòng)),svg,可以配合velocity.ui.js 注冊(cè)動(dòng)畫(huà)集合，管理多個(gè)元素應(yīng)用同一動(dòng)畫(huà)時(shí)的間隔，velocity.ui.js還內(nèi)置了多種動(dòng)畫(huà)特效，方便選擇。
velocity.js還提供了Velocity("finish")指令來(lái)立即完成整個(gè)動(dòng)畫(huà)隊(duì)列。
velocity.js中文官網(wǎng)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107298.html
摘要：微信公眾號(hào)后端進(jìn)階，專(zhuān)注后端技術(shù)分享框架分布式中間件服務(wù)治理等等。 微信公眾號(hào)「后端進(jìn)階」，專(zhuān)注后端技術(shù)分享：Java、Golang、WEB框架、分布式中間件、服務(wù)治理等等。 前段時(shí)間有個(gè)朋友向我提了一個(gè)問(wèn)題，他說(shuō)在搭建 RocketMQ 集群過(guò)程中遇到了關(guān)于消費(fèi)訂閱的問(wèn)題，具體問(wèn)題如下： showImg(https://segmentfault.com/img/remote/1460...
摘要：總結(jié)以上這些在日常使用的時(shí)候如果不了解，很少會(huì)去用到，但如果想寫(xiě)出優(yōu)雅，簡(jiǎn)潔的代碼，這些概念會(huì)起到一定的幫助作用參考 collections 數(shù)據(jù)類(lèi)型 collections 數(shù)據(jù)類(lèi)型主要是為了彌補(bǔ) list /tuple / dict 的額外數(shù)據(jù)類(lèi)型 ChainMap 代碼： import collections ## 賦值，合并字典的作用 a = {a:A} b = {b:B} ...
摘要：等待一段時(shí)間是否有線(xiàn)程喚醒鎖，如果沒(méi)有，超時(shí)自動(dòng)喚醒。隨機(jī)喚醒等待隊(duì)列中的等待同一個(gè)鎖的一個(gè)線(xiàn)程，使這個(gè)線(xiàn)程退出等待隊(duì)列，進(jìn)入可運(yùn)行狀態(tài)。條件隊(duì)列中是處于等待狀態(tài)的線(xiàn)程，等待特定條件為真。在一般情況下，總應(yīng)該調(diào)用喚醒所有需要被喚醒的線(xiàn)程。 方法 java.lang.Object public final native void wait() throws InterruptedExce...
閱讀 1538·2021-11-24 09:39
閱讀 1843·2021-11-22 15:25
閱讀 3813·2021-11-19 09:40
閱讀 3356·2021-09-22 15:31
閱讀 1367·2021-07-29 13:49
閱讀 1305·2019-08-26 11:59
閱讀 1376·2019-08-26 11:39
閱讀 985·2019-08-26 11:00
