JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）課件：利用JavaScript實(shí)現(xiàn)動(dòng)畫(huà)效果

JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）利用JavaScript實(shí)現(xiàn)動(dòng)畫(huà)效果8.1動(dòng)畫(huà)效果的用途8.2構(gòu)建動(dòng)畫(huà)對(duì)象8.3擴(kuò)展動(dòng)畫(huà)對(duì)象8.4利用JavaScript庫(kù)實(shí)現(xiàn)動(dòng)畫(huà)效果02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）28.1動(dòng)畫(huà)效果的用途在Web應(yīng)用頁(yè)面設(shè)計(jì)中，動(dòng)畫(huà)效果有時(shí)候會(huì)被認(rèn)為華而不實(shí)，尤其是在被濫用的時(shí)候。但恰如其分的動(dòng)畫(huà)效果對(duì)頁(yè)面設(shè)計(jì)是很有幫助的，而且動(dòng)畫(huà)效果還被用來(lái)提示用戶(hù)頁(yè)面上發(fā)生的事件。在傳統(tǒng)的Web應(yīng)用頁(yè)面設(shè)計(jì)中，用戶(hù)在頁(yè)面上執(zhí)行的操作都是有反饋的。單擊一個(gè)提交按鈕或單擊一個(gè)鏈接，瀏覽器都會(huì)給出正在提交或正在跳轉(zhuǎn)的提示，直到頁(yè)面加載完畢。但是在引入Ajax技術(shù)之后，頁(yè)面就可能在不刷新的情況從Web服務(wù)器獲取數(shù)據(jù)，這時(shí)候就需要一種方式告訴用戶(hù)執(zhí)行了什么動(dòng)作，或者正在執(zhí)行什么動(dòng)作。02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）38.1動(dòng)畫(huà)效果的用途提示性的動(dòng)畫(huà)效果告訴用戶(hù)，當(dāng)前頁(yè)面還在聽(tīng)話的運(yùn)行著，沒(méi)有出現(xiàn)任何的錯(cuò)誤。動(dòng)畫(huà)效果還適合用來(lái)展示或隱藏信息。如果只是簡(jiǎn)單的改變一些頁(yè)面元素的可見(jiàn)性，用戶(hù)很可能會(huì)忽略頁(yè)面上發(fā)生的情況。如果在改變頁(yè)面元素可見(jiàn)性的同時(shí)給元素加上動(dòng)畫(huà)效果，用戶(hù)這馬上能發(fā)現(xiàn)頁(yè)面的改變，并且把自己的操作和這些改變聯(lián)系起來(lái)。適當(dāng)?shù)膭?dòng)畫(huà)效果還可以改善用戶(hù)的瀏覽體驗(yàn)02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）48.2構(gòu)建動(dòng)畫(huà)對(duì)象8.2.1回調(diào)8.2.2動(dòng)畫(huà)隊(duì)列02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）58.2.1回調(diào)對(duì)于動(dòng)畫(huà)效果，我們需要關(guān)注3個(gè)時(shí)刻：動(dòng)畫(huà)效果開(kāi)始：此時(shí)可以執(zhí)行一些與動(dòng)畫(huà)效果開(kāi)始相關(guān)的任務(wù)，比如在此時(shí)改變某個(gè)圖片的顯示。動(dòng)畫(huà)效果的每一步：此時(shí)可以執(zhí)行代碼跟蹤動(dòng)畫(huà)效果相關(guān)元素的狀態(tài)，也可以檢測(cè)動(dòng)畫(huà)效果元素之間是否有交錯(cuò)。動(dòng)畫(huà)結(jié)束：此時(shí)可以執(zhí)行一些元素操作或開(kāi)始Ajax調(diào)用之類(lèi)的代碼。02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）68.2.2動(dòng)畫(huà)隊(duì)列動(dòng)畫(huà)隊(duì)列也就是按順序執(zhí)行的一組動(dòng)畫(huà)效果。02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）78.3擴(kuò)展動(dòng)畫(huà)對(duì)象在Effect動(dòng)畫(huà)效果對(duì)象的基礎(chǔ)上，我們可以針對(duì)不同的頁(yè)面效果要求擴(kuò)展出對(duì)應(yīng)的動(dòng)畫(huà)效果類(lèi)。接下來(lái)我們來(lái)創(chuàng)建一個(gè)新聞列表頁(yè)面，頁(yè)面上的內(nèi)容按照新聞標(biāo)題→內(nèi)容→新聞標(biāo)題→內(nèi)容的順序依次排列下來(lái)。02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）88.4利用JavaScript庫(kù)實(shí)現(xiàn)動(dòng)畫(huà)效果8.4.1jQuery8.4.2ExtJS02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）98.4.1jQueryjQuery是一個(gè)極其精簡(jiǎn)并且高效的庫(kù)，我們可以使用它來(lái)快速完成許多動(dòng)畫(huà)效果。jQuery庫(kù)提供的方法鏈非常適合用來(lái)快速添加動(dòng)畫(huà)效果，把任何一個(gè)獲取到的DOM元素交給動(dòng)畫(huà)效果對(duì)象就可以了。02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）108.4.2ExtJSExtJS是一套完整的界面部件庫(kù)，它提供了構(gòu)建富客戶(hù)端Web應(yīng)用程序所需要的全部功能。同時(shí)ExtJS庫(kù)也提供了Ext.Fx對(duì)象，專(zhuān)門(mén)用于實(shí)現(xiàn)各種動(dòng)畫(huà)效果。同jQuery庫(kù)一樣ExtJS庫(kù)也適合用來(lái)快速添加動(dòng)畫(huà)效果，把任何一個(gè)獲取到的DOM元素交給動(dòng)畫(huà)效果對(duì)象就可以了。02十一月2024JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）11

本章小結(jié)本章主要說(shuō)明了如何利用JavaScript實(shí)現(xiàn)頁(yè)面上的動(dòng)畫(huà)效果，并且重點(diǎn)介紹了JavaScript動(dòng)畫(huà)對(duì)象的構(gòu)建過(guò)程。通過(guò)本章，希望讀者能夠了解利用JavaScript實(shí)現(xiàn)頁(yè)面動(dòng)畫(huà)的原理，并能夠在Web應(yīng)用開(kāi)發(fā)中自己構(gòu)建JavaScript對(duì)象來(lái)實(shí)現(xiàn)所需的動(dòng)畫(huà)效果。本章最后重點(diǎn)講解了兩個(gè)典型的JavaScript庫(kù)jQuery與ExtJS在動(dòng)畫(huà)效果的實(shí)現(xiàn)上提供的便捷方法。在對(duì)jQuery與ExtJS庫(kù)動(dòng)畫(huà)效果的舉例說(shuō)明中只涉及到了常用的一