小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

學(xué)習(xí)記錄jQuery的animate函數(shù)

 昵稱10504424 2014-08-13

很久之前就對(duì)jQuery animate的實(shí)現(xiàn)非常感興趣，不過前段時(shí)間很忙，直到前幾天端午假期才有時(shí)間去研究。

jQuery.animate的每種動(dòng)畫過渡效果都是通過easing函數(shù)實(shí)現(xiàn)的。jQuery1.4.2中就預(yù)置了兩個(gè)這樣的函數(shù)：

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

從參數(shù)名隱約可以推測(cè)出firstNum是初始值。要是你的數(shù)學(xué)學(xué)得比較好，你可以發(fā)現(xiàn)linear函數(shù)是直線方程；要是你的物理學(xué)得比較好，你可以發(fā)現(xiàn)它是勻速運(yùn)動(dòng)的位移方程（我數(shù)學(xué)和物理都沒學(xué)好，是別人提醒我的……）。那么diff和p就是速度和時(shí)間了。

再看看jQuery.animate的原型：

animate: function( prop, speed, easing, callback )

各參數(shù)的說明如下：

元素的當(dāng)前樣式值（firstNum）可以獲取，動(dòng)畫時(shí)長(zhǎng)（p）就是duration，最終樣式值是prop。理論上說，動(dòng)畫速度（diff）是可 以算出來的。但是這又必然需要另一個(gè)函數(shù)進(jìn)行運(yùn)算。這樣做明顯是不明智的。再看看調(diào)用easing函數(shù)的相關(guān)代碼（位于 jQuery.fx.prototype.step中）：

var t = now()；
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

可以發(fā)現(xiàn)，p參數(shù)的值也就是this.state的值，從上下文得知它實(shí)際上是動(dòng)畫的時(shí)間進(jìn)度。而firstNum和diff的參數(shù)值都是寫死的，分別是0和1。這下easing函數(shù)的秘密完全被解開，p、firstNum、diff都是百分率而非實(shí)際數(shù)值，easing函數(shù)的返回值也就是位移的進(jìn)度。diff的值是1，也就是以1倍的速度運(yùn)行動(dòng)畫。算出位移進(jìn)度后，通過“初始值+（最終值-初始值）×進(jìn)度”就可以算出當(dāng)前位移值：

this.now = this.start + ((this.end - this.start) * this.pos);

通過setInterval每隔一定時(shí)間（jQuery中是13ms）進(jìn)行一次位移運(yùn)算，直到當(dāng)前時(shí)間與初始時(shí)間的差值大于動(dòng)畫時(shí)長(zhǎng)，這就是jQuery.animate的執(zhí)行過程。

按照常規(guī)思路，動(dòng)畫的實(shí)現(xiàn)方式是這樣的：通過setInterval每隔一定時(shí)間給某個(gè)值增加特定數(shù)值，直到這個(gè)值達(dá)到限制值。這樣做的主要問題是，不同瀏覽器的運(yùn)行速度不同，從而導(dǎo)致動(dòng)畫速度有差異，一般是IE下比較慢，F(xiàn)irefox下比較快。而jQuery.animate是以當(dāng)前時(shí)間來決定位移值，某個(gè)時(shí)刻的位移值總是固定的，因而動(dòng)畫速度不會(huì)有差異。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多