精品国产三级a在线观看网站 ,亚洲7777夜

7-8 動(dòng)畫實(shí)現(xiàn)
收藏

動(dòng)畫實(shí)現(xiàn)

在動(dòng)畫算法與設(shè)計(jì)的小節(jié)中我都把動(dòng)畫一些相關(guān)的東西單獨(dú)提出來(lái)分析了，其實(shí) jQuery 的動(dòng)畫的原理就是這樣的，這一節(jié)我們把設(shè)計(jì)與算法融合在一起來(lái)實(shí)現(xiàn)一個(gè)偽 jQuery 的動(dòng)畫模塊。

在 jQuery 的設(shè)計(jì)中 ready、ajax、動(dòng)畫都是支持 Promise 這個(gè)概念的，也就是通過(guò) Deferred 提供了一個(gè)抽象的非阻塞的解決方案，它創(chuàng)建一個(gè) promise 對(duì)象，其目的是在未來(lái)某個(gè)時(shí)間點(diǎn)返回一個(gè)響應(yīng)，對(duì)應(yīng)的也就是 done、fail、progress、complete、always等方法，所以在第一部分理解 Deferred 對(duì)象是非常重要的，這樣才能讀懂這類設(shè)計(jì)。

具體的代碼我們可以如右圖所示，這里我們開(kāi)始解釋下其設(shè)計(jì)的目的。

book.animate({
    left: '500'
}, {
    duration: 2000
})

就這個(gè)動(dòng)畫而言，我們要涉及幾個(gè)問(wèn)題，left:500 其實(shí)是最終的坐標(biāo)值。

那么完成這個(gè) left 動(dòng)畫我們至少需要：

起點(diǎn)位置
終點(diǎn)位置
運(yùn)動(dòng)的時(shí)間
每次定時(shí)器改變的坐標(biāo)值
單位的換算(px、em、%)

每一種屬性其實(shí)都是有各自的變換的一個(gè)算法，包括計(jì)算開(kāi)始值、變化值、時(shí)間等等，所以我們必須給每一個(gè)變換的屬性都進(jìn)行一個(gè)包裝，用來(lái)封裝各自的相關(guān)數(shù)據(jù)，那么我們其實(shí)可以用一個(gè)類來(lái)構(gòu)造跟屬性變化相關(guān)的一些信息，如 Tween 類。

通過(guò)一個(gè) Tween 類構(gòu)造出來(lái)的緩動(dòng)對(duì)象，其實(shí)就是針對(duì)每一個(gè)屬性的封裝對(duì)象，這樣我們只需要設(shè)計(jì)一個(gè)定時(shí)器，在指定的時(shí)間內(nèi)調(diào)用 Tween 生成的這些對(duì)象就可以了，Tween 內(nèi)部控制著各自屬性的狀態(tài)改變。

具體右邊的實(shí)現(xiàn)代碼涉及了如下幾個(gè)部分了：

Animation 函數(shù)，入口函數(shù)用來(lái)做一些參數(shù)的初始化工作，整個(gè)動(dòng)畫的開(kāi)始調(diào)度
animation 對(duì)象就是實(shí)際的動(dòng)畫對(duì)象了，通過(guò) Animation 函數(shù)創(chuàng)建，這個(gè)對(duì)象上實(shí)現(xiàn)了所有屬性與方法
new Tween() 通過(guò) Tween 創(chuàng)建每一個(gè)屬性對(duì)象相關(guān)的數(shù)據(jù)
animation.tweens 保存了每一個(gè)屬性對(duì)象的容器
Animation.fx 就是具體開(kāi)始動(dòng)畫執(zhí)行的調(diào)用的一個(gè)調(diào)度對(duì)象了
定時(shí)器都是執(zhí)行一個(gè)回調(diào)函數(shù)的，tick 就是定時(shí)器執(zhí)行的回調(diào)，在 tick 函數(shù)中通過(guò)計(jì)算出變化數(shù)據(jù)，然后通過(guò)循環(huán) animation.tweens 中的每一個(gè)動(dòng)畫屬性對(duì)象，來(lái)實(shí)現(xiàn)改變

其實(shí)動(dòng)畫的整個(gè)設(shè)計(jì)就是這么簡(jiǎn)單的，代碼的復(fù)雜是因?yàn)檫€兼容了各種不同情況的處理，比如實(shí)現(xiàn) deferred 機(jī)制，針對(duì)寬高變化的 overflow 處理，針對(duì) display 為 inline 情況下的處理，那么這些都是一些預(yù)處理的機(jī)制，在對(duì)應(yīng)的 defaultPrefilter 函數(shù)中就能找到，我們沒(méi)有必要是單獨(dú)實(shí)現(xiàn)了。

其實(shí)動(dòng)畫的設(shè)計(jì)，我們可以學(xué)到一個(gè)很重要的一點(diǎn): 封裝變化，把每一個(gè)屬性變化都獨(dú)立封裝一個(gè)對(duì)象，讓其自己管理與控制。

任務(wù)

?不會(huì)了怎么辦

||

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <style type="text/css"> button{ display: block; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button id="one">jQuery動(dòng)畫的模擬實(shí)現(xiàn):left:50</button> <button id="two">jQuery動(dòng)畫的模擬實(shí)現(xiàn):left:500</button> <ul id="book" alt="" style="background:red;opacity:1;position: relative; left: 300px;width:200px;height:100px;display:inline;"></ul> <script type="text/javascript"> var book = document.getElementById('book'); var $book = $('#book'); var i = 10 while(i){ $book.append("<li>11</li>") i--; } //////////// //創(chuàng)建動(dòng)畫緩動(dòng)對(duì)象 // //////////// function Tween(value, prop, animation) { this.elem = animation.elem; this.prop = prop; this.easing = "swing"; //動(dòng)畫緩動(dòng)算法 this.options = animation.options; //獲取初始值 this.start = this.now = this.get(); //動(dòng)畫最終值 this.end = value; //單位 this.unit = "px" } function getStyles(elem) { return elem.ownerDocument.defaultView.getComputedStyle(elem, null); }; function swing(p) { return 0.5 - Math.cos(p * Math.PI) / 2; } Tween.prototype = { //獲取元素的當(dāng)前屬性 get: function() { var computed = getStyles(this.elem); var ret = computed.getPropertyValue(this.prop) || computed[this.prop]; return parseFloat(ret); }, //運(yùn)行動(dòng)畫 run:function(percent){ var eased //根據(jù)緩動(dòng)算法改變percent this.pos = eased = swing(percent); //獲取具體的改變坐標(biāo)值 this.now = (this.end - this.start) * eased + this.start; //最終改變坐標(biāo) this.elem.style[this.prop] = this.now + "px"; return this; } } //////// //動(dòng)畫類 // //////// function Animation(elem, properties, options){ //動(dòng)畫對(duì)象 var animation = { elem : elem, props : properties, originalOptions : options, options : options, startTime : Animation.fxNow || createFxNow(),//動(dòng)畫開(kāi)始時(shí)間 tweens : [] //存放每個(gè)屬性的緩動(dòng)對(duì)象，用于動(dòng)畫 } //生成屬性對(duì)應(yīng)的動(dòng)畫算法對(duì)象 for (var k in properties) { // tweens保存每一個(gè)屬性對(duì)應(yīng)的緩動(dòng)控制對(duì)象 animation.tweens.push( new Tween(properties[k], k, animation) ) } //動(dòng)畫狀態(tài) var stopped; //動(dòng)畫的定時(shí)器調(diào)用包裝器 var tick = function() { if (stopped) { return false; } //動(dòng)畫時(shí)間算法 var currentTime = Animation.fxNow || createFxNow //運(yùn)動(dòng)時(shí)間遞減 remaining = Math.max(0, animation.startTime + animation.options.duration - currentTime), temp = remaining / animation.options.duration || 0, percent = 1 - temp; var index = 0, length = animation.tweens.length; //執(zhí)行動(dòng)畫改變 for (; index < length; index++) { //percent改變值 animation.tweens[index].run(percent); } //是否繼續(xù)，還是停止 if (percent <= 1 && length) { return remaining; } else { //停止 return false; } } tick.elem = elem; tick.anim = animation Animation.fx.timer(tick) } //創(chuàng)建開(kāi)始時(shí)間 function createFxNow() { setTimeout(function() { Animation.fxNow = undefined; }); return (Animation.fxNow = Date.now()); } //用于定時(shí)器調(diào)用 Animation.timers =[] Animation.fx = { //開(kāi)始動(dòng)畫隊(duì)列 timer: function(timer) { Animation.timers.push(timer); if (timer()) { //開(kāi)始執(zhí)行動(dòng)畫 Animation.fx.start(); } else { Animation.timers.pop(); } }, //開(kāi)始循環(huán) start: function() { if (!Animation.timerId) { Animation.timerId = setInterval(Animation.fx.tick, 13); } }, //停止循環(huán) stop:function(){ clearInterval(Animation.timerId); Animation.timerId = null; }, //循環(huán)的的檢測(cè) tick: function() { var timer, i = 0, timers = Animation.timers; Animation.fxNow = Date.now(); for (; i < timers.length; i++) { timer = timers[i]; if (!timer() && timers[i] === timer) { //如果完成了就刪除這個(gè)動(dòng)畫 timers.splice(i--, 1); } } if (!timers.length) { Animation.fx.stop(); } Animation.fxNow = undefined; } } $("#one").click(function(){ Animation(book, { left: '50' }, { duration: 2000 }) }); $("#two").click(function() { Animation(book, { left: '500' }, { duration: 2000 }) }); </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)站添加到書簽

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

7-8 動(dòng)畫實(shí)現(xiàn)

動(dòng)畫實(shí)現(xiàn)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

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

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

手記推薦

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

7-8 動(dòng)畫實(shí)現(xiàn)

熱搜

最近搜索清空

動(dòng)畫實(shí)現(xiàn)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫筆記

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

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

手記推薦

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