亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

動畫調度

對于 jQuery 的動畫的設計我們要分 2 個層面理解:

  1. 每一個動畫效果可以看作一個獨立的動畫對象,每個對象都實現了針對自己這個動畫的生命周期的控制
  2. 動畫對象與動畫對象之間其實是沒有直接關系,但是為了做到連續調用就需要引入一套隊列機制也就是 Queue 來控制對象之間的轉換的控制

動畫的源碼:

animate: function(prop, speed, easing, callback) {
   doAnimation = function() {
      var anim = Animation(this, args, optall);
   };
   this.queue(optall.queue, doAnimation);
}

這個代碼縮減了,但是我們上面提到的最重要的 2 點這里都涉及到了:通過 queue 調度動畫的之間的銜接,Animation 方法執行單個動畫的封裝。

jQuery 在 queue 的調度上涉及了一個關鍵的處理同步與異步代碼同時執行,同步收集動畫序列,異步調用序列,看看整個調用的流程是這樣的:

  1. 通過多個 animate 方法形成動畫鏈,那么這個動畫鏈其實都是會加入到 queue 隊列里面
  2. 在每一次 queue 方法中會把動畫數據寫到隊列中,然后取出隊列中的第一個序列通過 dequeue 方法執行
  3. 開始執行之前寫一個進程鎖“inprogress”到 queue 里面,代表這個動畫還在執行中,防止同個序列的多個動畫重復執行,這個就是異步執行同步收集的處理方案
  4. 此時動畫開始了,這里注意動畫是在異步執行的同步的代碼,繼續調用下一個 animate
  5. 執行同樣的 animate 方法邏輯但是此時問題來了,動畫可能還在執行可是后續的 animate 還在繼續調用,所以這個時候后面的動畫代碼就需要等待了(進程鎖)
  6. 隊列頭是有一把“inprogress”進程鎖的,那么這時候動畫只需要加入隊列,但是可以通過 inprogress 是否存在來判斷是否執行
  7. 所有的 animate 方法在加入隊列都是按照以上的邏輯依次執行,動畫執行完畢了就會有一個結束通知,然后從 queue 取出第一個隊列繼續執行了,如此循環

以上是整個動畫的調度一個流程,其實都是利用隊列異步的空閑然后執行同步的代碼,這樣在處理上是沒有浪費資源的,而且精確度也是最高的。

任務

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?