偷拍国内女厕所在线久草,99亚洲一区二区三区,综合久久vs婷婷一区二区三区

動畫思路

jQuery 的動畫為了穩定與兼容的的選擇，所以即使在目前的 2.1.1 的版本中也是采用的幀動畫而不是最新的 CSS3 動畫，至于原因當然有很多我們這里就只涉及框架的幀動畫的處理，幀動畫的實現動畫的原理跟動畫片的制作一樣。動畫片是把一些差距不大的原畫以一定幀數播放, js 動畫是靠連續改變元素的某個 css 屬性值,比如 left, top 達到視覺的動畫效果。

book.animate({
    left: '+=50',
}).animate({
    left: '+=100',
}).animate({
    left: '-=50',
});

這里是一組最簡單的動畫，但是在設計上會有一個最重要的問題：

因為動畫是異步的，但是 animate 方法的鏈式代碼是同步的，所以這里要涉及一個最重要的問題，動畫隊列要如何有序的調用?

傳統的思路

定時器 setTimeout 方法收集，用一個數組保存每一個 animate 方法，把 animate 方法排成隊列，在之后開始執行動畫。
這里存在的一個嚴重的問題，讓定時器產生足夠長的時間差，在這個時間差內去收集 animate 方法，那么這個時間差需要多長？顯而易見這樣的思路不是非常的精確。

jQuery 為動畫量身定制了隊列機制，我們的思路可以是這樣

有一個隊列，在執行第一個 animate 方法的時候加入隊列就開始執行動畫，因為動畫自己在執行的時候就會產生異步的時間差
我們在這個時間差的里面繼續去加入之后的動畫 animate 進去隊列，然后在每一個動畫結束之后去取出隊列中的第一個 animate 方法開始執行，依次循環下去

總結

兩方方法都是利用異步收集同步的代碼，區別就是一個是靠定時器，一個是靠動畫自身，所以在精確度上來說顯然是動畫自身控制是最合理的。好比我們去面試，面試官只要讓每一個面試完畢的人去通知后面的人繼續進來面試一樣，如此反復

右邊代碼，請在支持 webkit 的瀏覽器下面調試，谷歌、急速360。

任務

?不會了怎么辦

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>動畫思路</title> </head> <body> 請在支持webkit的瀏覽器下面調試，谷歌、急速360 <div id="div1" style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;">點擊執行動畫</div> <script type="text/javascript"> (function($) { window.$ = $; })(function() { var rquickExpr = /^(?:#([\w-]*))$/; function aQuery(selector) { return new aQuery.fn.init(selector); } /** * 動畫 * @return {[type]} [description] */ var animation = function() { var self = {}; var Queue = []; //動畫隊列 var fireing = false //動畫鎖 var first = true; //通過add接口觸發 var getStyle = function(obj, attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } var makeAnim = function(element, options, func) { var width = options.width //包裝了具體的執行算法 //css3 //setTimeout element.style.webkitTransitionDuration = '2000ms'; element.style.webkitTransform = 'translate3d(' + width + 'px,0,0)'; //監聽動畫完結 element.addEventListener('webkitTransitionEnd', function() { func() }); } var _fire = function() { //加入動畫正在觸發 if (!fireing) { var onceRun = Queue.shift(); if (onceRun) { fireing = true; //next onceRun(function() { fireing = false; _fire(); }); } else { fireing = true; } } } return self = { //增加隊列 add: function(element, options) { Queue.push(function(func) { makeAnim(element, options, func); }); //如果有一個隊列立刻觸發動畫 if (first && Queue.length) { first = false; self.fire(); } }, //觸發 fire: function() { _fire(); } } }(); aQuery.fn = aQuery.prototype = { run: function(options) { animation.add(this.element, options); return this; } } var init = aQuery.fn.init = function(selector) { var match = rquickExpr.exec(selector); var element = document.getElementById(match[1]) this.element = element; return this; } init.prototype = aQuery.fn; return aQuery; }()); //dom var oDiv = document.getElementById('div1'); //調用 oDiv.onclick = function() { $('#div1').run({ 'width': '500' }).run({ 'width': '300' }).run({ 'width': '1000' }); }; </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

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

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

7-3 動畫思路

動畫思路

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

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

7-3 動畫思路

熱搜

最近搜索清空

動畫思路

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦