jquery網(wǎng)頁(yè)開(kāi)發(fā)實(shí)例精解教學(xué)第13章動(dòng)畫(huà)設(shè)計(jì)

第13章動(dòng)畫(huà)設(shè)計(jì)動(dòng)畫(huà)可以更直觀更生動(dòng)的表現(xiàn)設(shè)出計(jì)者的意圖。制作動(dòng)畫(huà)可以通過(guò)專(zhuān)業(yè)的動(dòng)畫(huà)軟件來(lái)制作，如Flash等?，F(xiàn)在網(wǎng)頁(yè)上動(dòng)畫(huà)所占的成分越來(lái)越大。jQuery除了可以實(shí)現(xiàn)前面章節(jié)所完成的效果外，還可以以一定程度來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。本章我們講解利用jQuery在網(wǎng)頁(yè)上制作動(dòng)畫(huà)。13.1jQuery動(dòng)畫(huà)基礎(chǔ)本節(jié)我們將介紹利用jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果的基礎(chǔ)知識(shí)。13.1.1jQuery動(dòng)畫(huà)函數(shù)jQuery的動(dòng)畫(huà)函數(shù)總共分成四類(lèi)：（1）基本動(dòng)畫(huà)函數(shù)：既有透明度漸變，又有滑動(dòng)效果，是最常用的動(dòng)畫(huà)效果函數(shù)。（2）滑動(dòng)動(dòng)畫(huà)函數(shù)：僅適用滑動(dòng)漸變動(dòng)畫(huà)效果。（3）淡入淡出動(dòng)畫(huà)函數(shù)：僅適用透明度漸變動(dòng)畫(huà)效果。（4）自定義動(dòng)畫(huà)函數(shù)：作為上述三種動(dòng)畫(huà)函數(shù)的補(bǔ)充和擴(kuò)展。下面將這幾種動(dòng)畫(huà)函數(shù)總結(jié)一下。首先是基本動(dòng)畫(huà)函數(shù)，參考表所示?；瑒?dòng)動(dòng)畫(huà)函數(shù)請(qǐng)參考表所示。淡入淡出動(dòng)畫(huà)函數(shù)請(qǐng)參考表所示。自定義動(dòng)畫(huà)參數(shù)請(qǐng)參考表所示。13.1.2jQuery動(dòng)畫(huà)簡(jiǎn)單例子下面用一個(gè)自定義動(dòng)畫(huà)的簡(jiǎn)單例子來(lái)看一下jQuery制作動(dòng)畫(huà)過(guò)程。在這個(gè)例子中我們所要達(dá)成的效果是：在頁(yè)面上垂直擺放了幾個(gè)超鏈接，當(dāng)將鼠標(biāo)懸停在其中一個(gè)超鏈接上時(shí)這個(gè)超鏈接動(dòng)態(tài)向右縮進(jìn)，當(dāng)鼠標(biāo)移開(kāi)超鏈接時(shí)它恢復(fù)到原來(lái)的位置。實(shí)現(xiàn)原理就是利用了前面總結(jié)的自定義動(dòng)畫(huà)函數(shù)animate()，并在這個(gè)函數(shù)中修改超鏈接的padding-left屬性，而且給定了動(dòng)畫(huà)持續(xù)時(shí)間，效果如圖所示。為了實(shí)現(xiàn)這個(gè)效果，我們?cè)贖TML靜態(tài)頁(yè)面部分創(chuàng)建列表嵌套超鏈接。然后，引入jQuery庫(kù)文件：<scripttype="text/javascript"src="jslib/jquery-1.6.js"></script>最后，加上Javascript功能代碼。效果如圖所示。13.2jQueryUI中實(shí)現(xiàn)的動(dòng)畫(huà)效果在jQueryUI中提供了多種動(dòng)畫(huà)效果供我們參考。這些動(dòng)畫(huà)效果除了前面介紹的基本動(dòng)畫(huà)效果、滑動(dòng)效果、淡入淡出效果外，還有百葉窗效果、跳躍效果、縮減效果、移動(dòng)效果、分裂效果、折疊效果、高亮淡入淡出效果、脈沖閃爍效果、擺動(dòng)效果等。這一節(jié)逐一介紹它們的實(shí)現(xiàn)。13.2.1jQueryUI動(dòng)畫(huà)特效使用首先，參照jQueryUI中給出的例子來(lái)看一下如何使用動(dòng)畫(huà)特效。這個(gè)例子在jQueryUI的demos文件下的show子文件夾中。這個(gè)例子使用了jQueryUI提供的各種特效顯示一個(gè)消息層。頁(yè)面的初始加載效果如圖所示。13.2.2百葉窗效果百葉窗效果使用了jQueryUI的jquery.effects.core.js和jquery.effects.blind.js文件。第一個(gè)文件是動(dòng)畫(huà)特效的核心文件，里面提供了一些實(shí)現(xiàn)特效的基本和常用操作函數(shù)。第二個(gè)文件是實(shí)現(xiàn)百葉窗效果的插件文件。它的設(shè)計(jì)思想是根據(jù)百葉窗打開(kāi)方向設(shè)定動(dòng)畫(huà)的操作高度或者寬度，然后利用自定義動(dòng)畫(huà)實(shí)現(xiàn)動(dòng)畫(huà)效果。在這里使用了jQuery的animate()自定義動(dòng)畫(huà)函數(shù)來(lái)完成動(dòng)畫(huà)效果；css()樣式設(shè)定函數(shù)修改消息部分的樣式，主要是寬和高兩個(gè)參數(shù)；hide()隱藏函數(shù)，將消息部分隱藏起來(lái)；height()獲取元素高度函數(shù)；show()顯示元素函數(shù)；width()獲取元素寬度函數(shù)。主要設(shè)計(jì)思路是根據(jù)動(dòng)畫(huà)顯示方向（縱向或橫向），通過(guò)自定義動(dòng)畫(huà)的特效將消息部分的高或者寬調(diào)整為原始大小。效果如圖1和圖2所示。圖1圖213.2.3跳躍效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和跳躍效果的插件文件jquery.effects.bounce.js。它的設(shè)計(jì)思想是通過(guò)設(shè)定動(dòng)畫(huà)跳躍的行為參數(shù)、跳躍次數(shù)、跳躍高度、跳躍用時(shí)、循環(huán)調(diào)用自定義動(dòng)畫(huà)實(shí)現(xiàn)跳躍過(guò)程。所謂跳躍實(shí)際上是通過(guò)變換設(shè)定元素的頂端坐標(biāo)值來(lái)完成。這里主要使用了jQuery的animate()自定義動(dòng)畫(huà)函數(shù)；css()樣式設(shè)定函數(shù)；show()顯示元素函數(shù)。主要設(shè)計(jì)思路是通過(guò)不斷改變消息部分的頂端坐標(biāo)位置來(lái)實(shí)現(xiàn)跳躍動(dòng)畫(huà)效果。效果如圖所示。13.2.4縮減效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和縮減效果的插件文件jquery.effects.clip.js。它的設(shè)計(jì)思想是設(shè)定元素起始出現(xiàn)位置，即元素高度的一半，然后元素的上下兩部分依次向兩邊展開(kāi)。效果如圖所示。13.2.5移動(dòng)效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和移動(dòng)效果的插件文件jquery.effects.drop.js。它的設(shè)計(jì)思想類(lèi)似跳躍效果，只是在移動(dòng)過(guò)程中通過(guò)一次自定義動(dòng)畫(huà)將元素起始左端位置加上一定的像素值使元素向右移動(dòng)。效果如圖所示。13.2.6分裂效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和分裂效果的插件文件jquery.effects.explode.js。它的設(shè)計(jì)思想是復(fù)制多個(gè)元素，元素個(gè)數(shù)按照動(dòng)畫(huà)排列的行和列數(shù)決定，將復(fù)制出的多個(gè)元素通過(guò)自定義動(dòng)畫(huà)變換坐標(biāo)位置由顯示區(qū)域遠(yuǎn)端向中間移動(dòng)完成效果。效果如圖所示。13.2.7折疊效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和折疊效果的插件文件jquery.effects.fold.js。它的設(shè)計(jì)思想是按照一定的折疊方向和折疊比例將元素用自定義動(dòng)畫(huà)多次修改坐標(biāo)位置實(shí)現(xiàn)。效果如圖1和圖2所示。圖1圖213.2.8高亮淡入淡出效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和高亮效果的插件文件jquery.effects.highlight.js。它的設(shè)計(jì)思想比較簡(jiǎn)單就是頻繁更換背景色及透明度來(lái)實(shí)現(xiàn)效果。效果如圖所示。13.2.9脈沖閃爍效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和閃爍效果的插件文件jquery.effects.pulsate.js。它的設(shè)計(jì)思想是利用自定義動(dòng)畫(huà)函數(shù)頻繁變化元素透明度來(lái)完成效果。效果如圖所示。13.2.10擺動(dòng)效果這個(gè)動(dòng)畫(huà)效果需要應(yīng)用到動(dòng)畫(huà)特效的核心文件和擺動(dòng)效果的插件文件jquery.effects.shake.js。它的設(shè)計(jì)思想和跳躍效果及本相同，只是擺動(dòng)方向?yàn)樽笥曳较?，并且在擺動(dòng)過(guò)程中的第一次擺動(dòng)、最后一次擺動(dòng)及中間的擺動(dòng)距離考慮的設(shè)定較跳躍要復(fù)雜。效果如圖1和圖2所示。圖1圖213.3小結(jié)jQuery動(dòng)畫(huà)效果能夠給用戶更愉悅的體驗(yàn)，也讓用戶能看到更生動(dòng)的頁(yè)面。本章主要介紹了jQuery動(dòng)畫(huà)函數(shù)，以及利用動(dòng)畫(huà)函數(shù)產(chǎn)生動(dòng)畫(huà)效果，及jQueryUI提供的動(dòng)畫(huà)效果