C2:動畫隊列

goji 發(fā)布于2019-08-26 11:39 / 1317人閱讀

摘要：的動畫系統(tǒng)就是執(zhí)行一個函數(shù)隊列。對元素應用等動畫，都會默認將函數(shù)壓入一個的隊列。動畫隊列向隊列中添加一個隊列函數(shù)，或者替換掉當前隊列。注意不一定是動畫隊列的最后一個動畫終態(tài)。還提供了指令來立即完成整個動畫隊列。

動畫隊列

隊列的作用就是讓我們把一個又一個的任務放到一起，確保只有當前面的任務完成了，才會開始下一個任務。這里面的任務可以是同步的，也可以是異步的。

jQuery的動畫系統(tǒng)就是執(zhí)行一個函數(shù)隊列。對jQuery元素應用fade,slide,animate等動畫，都會默認將函數(shù)壓入一個fx的隊列。在我們使用jq的animate()的時候，我們可以在option參數(shù)中傳入一個queue的標志位來決定這個動畫時候壓入當前元素的動畫隊列。如果為false,則不等待當前隊列完成，而是立即執(zhí)行該動畫。

$element.queue(fun(next)) 讓我們向隊列中插入一個函數(shù)，當我們向一個空隊列或者插入函數(shù)的時候，該函數(shù)會立即執(zhí)行。否則將排到隊尾執(zhí)行。插入的這個函數(shù)fun可以執(zhí)行一個同步或者異步的任務，但是不論是同步還是異步任務，如果我們想讓排在fun后面的隊列函數(shù)能夠執(zhí)行，都不要忘了在同步/異步任務完成之后使用next()。這個next 是jQuery的隊列系統(tǒng)在調(diào)用fun的時候傳入的，它是一個函數(shù)，執(zhí)行它就可以讓隊列繼續(xù)執(zhí)行。

jQuery動畫隊列Api

.queue(): 向隊列中添加一個隊列函數(shù)，或者替換掉當前隊列。速查
.dequeue(): 當我們替換了一個新隊列之后，或者使用.stop 停止一個隊列之后，我們需要這個函數(shù)來重新啟動隊列。速查
.stop(): 停止當前隊列中正在進行的任務。它還接收一個 jumptoend的參數(shù),如果傳入true,則直接跳到當前動畫的終態(tài)。注意不一定是動畫隊列的最后一個動畫終態(tài)。速查
.delay()：設置一個延時來讓隊列延遲執(zhí)行。

更快的velocity.js

以前比較老的版本的jQuery的動畫是使用定時器來完成的，新版本的jQuery增加了一項判斷，如果瀏覽器支持window.requestAnimationFrame,則會使用window.requestAnimationFrame.

jQuery 的動畫性能在移動端表現(xiàn)不佳，因為定時器或者其他的問題。velocity是一款性能更好的動畫庫。官方文檔的介紹也多次強調(diào)它的快，甚至要超過css3 transition了。它的api設計和jQuery.animate差不多一樣，其中動畫隊列的用法也和jQuery.queue一樣。它可以和jQuery一起使用。當不引用jQuery時，Velocity時掛載在window對象中的，當引用jQuery的時候，就掛載在jQuery對象下。只需在原先使用$.aniamte()的地方替換成$.velocity()，就切換到了velocity動畫庫。

velocity 兼容

velocity.js v2.0版本官方目前支持IE11, Edge, Chrome, Safari, and Firefox。（我自己用的時候，V2.0在IE11，edge會報錯。）。所以一般用V1.5。(兼容性好了，性能就要犧牲一點。)而且在如果要支持到IE8,就必須引入jQuery1.X版本。

velocity 特性

它支持屬性值函數(shù)，顏色動畫，CSS3的transform,scroll(頁面或者元素的滾動),svg,可以配合velocity.ui.js 注冊動畫集合，管理多個元素應用同一動畫時的間隔，velocity.ui.js還內(nèi)置了多種動畫特效，方便選擇。

velocity.js還提供了Velocity("finish")指令來立即完成整個動畫隊列。

velocity.js中文官網(wǎng)

云服務器 GPU云服務器動畫隊列 c2服務器云主機1c2m c.c2級域名申請

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107298.html

RocketMQ為什么要保證訂閱關系的一致性？

摘要：微信公眾號后端進階，專注后端技術分享框架分布式中間件服務治理等等。微信公眾號「后端進階」，專注后端技術分享：Java、Golang、WEB框架、分布式中間件、服務治理等等。前段時間有個朋友向我提了一個問題，他說在搭建 RocketMQ 集群過程中遇到了關于消費訂閱的問題，具體問題如下： showImg(https://segmentfault.com/img/remote/1460...

gekylin 2019-08-19 10:14 評論0 收藏0
3 - collections 模塊

摘要：總結以上這些在日常使用的時候如果不了解，很少會去用到，但如果想寫出優(yōu)雅，簡潔的代碼，這些概念會起到一定的幫助作用參考 collections 數(shù)據(jù)類型 collections 數(shù)據(jù)類型主要是為了彌補 list /tuple / dict 的額外數(shù)據(jù)類型 ChainMap 代碼： import collections ## 賦值，合并字典的作用 a = {a:A} b = {b:B} ...

Gemini 2019-07-30 18:44 評論0 收藏0
Java中的wait/notify/notifyAll

摘要：等待一段時間是否有線程喚醒鎖，如果沒有，超時自動喚醒。隨機喚醒等待隊列中的等待同一個鎖的一個線程，使這個線程退出等待隊列，進入可運行狀態(tài)。條件隊列中是處于等待狀態(tài)的線程，等待特定條件為真。在一般情況下，總應該調(diào)用喚醒所有需要被喚醒的線程。方法 java.lang.Object public final native void wait() throws InterruptedExce...

terasum 2019-08-16 11:01 評論0 收藏0