亚洲综合在线视频自拍,最新免费av在线观看

7-3 動(dòng)畫思路
收藏

動(dòng)畫思路

jQuery 的動(dòng)畫為了穩(wěn)定與兼容的的選擇，所以即使在目前的 2.1.1 的版本中也是采用的幀動(dòng)畫而不是最新的 CSS3 動(dòng)畫，至于原因當(dāng)然有很多我們這里就只涉及框架的幀動(dòng)畫的處理，幀動(dòng)畫的實(shí)現(xiàn)動(dòng)畫的原理跟動(dòng)畫片的制作一樣。動(dòng)畫片是把一些差距不大的原畫以一定幀數(shù)播放, js 動(dòng)畫是靠連續(xù)改變?cè)氐哪硞€(gè) css 屬性值,比如 left, top 達(dá)到視覺(jué)的動(dòng)畫效果。

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

這里是一組最簡(jiǎn)單的動(dòng)畫，但是在設(shè)計(jì)上會(huì)有一個(gè)最重要的問(wèn)題：

因?yàn)閯?dòng)畫是異步的，但是 animate 方法的鏈?zhǔn)酱a是同步的，所以這里要涉及一個(gè)最重要的問(wèn)題，動(dòng)畫隊(duì)列要如何有序的調(diào)用?

傳統(tǒng)的思路

定時(shí)器 setTimeout 方法收集，用一個(gè)數(shù)組保存每一個(gè) animate 方法，把 animate 方法排成隊(duì)列，在之后開(kāi)始執(zhí)行動(dòng)畫。
這里存在的一個(gè)嚴(yán)重的問(wèn)題，讓定時(shí)器產(chǎn)生足夠長(zhǎng)的時(shí)間差，在這個(gè)時(shí)間差內(nèi)去收集 animate 方法，那么這個(gè)時(shí)間差需要多長(zhǎng)？顯而易見(jiàn)這樣的思路不是非常的精確。

jQuery 為動(dòng)畫量身定制了隊(duì)列機(jī)制，我們的思路可以是這樣

有一個(gè)隊(duì)列，在執(zhí)行第一個(gè) animate 方法的時(shí)候加入隊(duì)列就開(kāi)始執(zhí)行動(dòng)畫，因?yàn)閯?dòng)畫自己在執(zhí)行的時(shí)候就會(huì)產(chǎn)生異步的時(shí)間差
我們?cè)谶@個(gè)時(shí)間差的里面繼續(xù)去加入之后的動(dòng)畫 animate 進(jìn)去隊(duì)列，然后在每一個(gè)動(dòng)畫結(jié)束之后去取出隊(duì)列中的第一個(gè) animate 方法開(kāi)始執(zhí)行，依次循環(huán)下去

總結(jié)

兩方方法都是利用異步收集同步的代碼，區(qū)別就是一個(gè)是靠定時(shí)器，一個(gè)是靠動(dòng)畫自身，所以在精確度上來(lái)說(shuō)顯然是動(dòng)畫自身控制是最合理的。好比我們?nèi)ッ嬖嚕嬖嚬僦灰屆恳粋€(gè)面試完畢的人去通知后面的人繼續(xù)進(jìn)來(lái)面試一樣，如此反復(fù)

右邊代碼，請(qǐng)?jiān)谥С?webkit 的瀏覽器下面調(diào)試，谷歌、急速360。

任務(wù)

?不會(huì)了怎么辦

||

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>動(dòng)畫思路</title> </head> <body> 請(qǐng)?jiān)谥С謜ebkit的瀏覽器下面調(diào)試，谷歌、急速360 <div id="div1" style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;">點(diǎn)擊執(zhí)行動(dòng)畫</div> <script type="text/javascript"> (function($) { window.$ = $; })(function() { var rquickExpr = /^(?:#([\w-]*))$/; function aQuery(selector) { return new aQuery.fn.init(selector); } /** * 動(dòng)畫 * @return {[type]} [description] */ var animation = function() { var self = {}; var Queue = []; //動(dòng)畫隊(duì)列 var fireing = false //動(dòng)畫鎖 var first = true; //通過(guò)add接口觸發(fā) 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 //包裝了具體的執(zhí)行算法 //css3 //setTimeout element.style.webkitTransitionDuration = '2000ms'; element.style.webkitTransform = 'translate3d(' + width + 'px,0,0)'; //監(jiān)聽(tīng)動(dòng)畫完結(jié) element.addEventListener('webkitTransitionEnd', function() { func() }); } var _fire = function() { //加入動(dòng)畫正在觸發(fā) if (!fireing) { var onceRun = Queue.shift(); if (onceRun) { fireing = true; //next onceRun(function() { fireing = false; _fire(); }); } else { fireing = true; } } } return self = { //增加隊(duì)列 add: function(element, options) { Queue.push(function(func) { makeAnim(element, options, func); }); //如果有一個(gè)隊(duì)列立刻觸發(fā)動(dòng)畫 if (first && Queue.length) { first = false; self.fire(); } }, //觸發(fā) 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'); //調(diào)用 oDiv.onclick = function() { $('#div1').run({ 'width': '500' }).run({ 'width': '300' }).run({ 'width': '1000' }); }; </script> </body> </html>

提問(wèn)題

提交

其他問(wèn)答

查看更多本節(jié)問(wèn)答

寫筆記

公開(kāi)筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開(kāi)微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問(wèn)題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

7-3 動(dòng)畫思路

動(dòng)畫思路

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

您還未綁定服務(wù)號(hào)

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

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

7-3 動(dòng)畫思路

熱搜

最近搜索清空

動(dòng)畫思路

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

您還未綁定服務(wù)號(hào)

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

手記推薦

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