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

8.1動(dòng)畫效果的用途提示性的動(dòng)畫效果告訴用戶，當(dāng)前頁面還在聽話的運(yùn)行著，沒有出現(xiàn)任何的錯(cuò)誤。動(dòng)畫效果還適合用來展示或隱藏信息。如果只是簡單的改變一些頁面元素的可見性，用戶很可能會忽略頁面上發(fā)生的情況。如果在改變頁面元素可見性的同時(shí)給元素加上動(dòng)畫效果，用戶這馬上能發(fā)現(xiàn)頁面的改變，并且把自己的操作和這些改變聯(lián)系起來。適當(dāng)?shù)膭?dòng)畫效果還可以改善用戶的瀏覽體驗(yàn)25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）18.2構(gòu)建動(dòng)畫對象8.2.1回調(diào)8.2.2動(dòng)畫隊(duì)列25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）28.2.1回調(diào)對于動(dòng)畫效果，我們需要關(guān)注3個(gè)時(shí)刻：動(dòng)畫效果開始：此時(shí)可以執(zhí)行一些與動(dòng)畫效果開始相關(guān)的任務(wù)，比如在此時(shí)改變某個(gè)圖片的顯示。動(dòng)畫效果的每一步：此時(shí)可以執(zhí)行代碼跟蹤動(dòng)畫效果相關(guān)元素的狀態(tài)，也可以檢測動(dòng)畫效果元素之間是否有交錯(cuò)。動(dòng)畫結(jié)束：此時(shí)可以執(zhí)行一些元素操作或開始Ajax調(diào)用之類的代碼。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）38.2.2動(dòng)畫隊(duì)列動(dòng)畫隊(duì)列也就是按順序執(zhí)行的一組動(dòng)畫效果。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）48.3擴(kuò)展動(dòng)畫對象在Effect動(dòng)畫效果對象的基礎(chǔ)上，我們可以針對不同的頁面效果要求擴(kuò)展出對應(yīng)的動(dòng)畫效果類。接下來我們來創(chuàng)建一個(gè)新聞列表頁面，頁面上的內(nèi)容按照新聞標(biāo)題→內(nèi)容→新聞標(biāo)題→內(nèi)容的順序依次排列下來。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）58.4利用JavaScript庫實(shí)現(xiàn)動(dòng)畫效果8.4.1jQuery8.4.2ExtJS25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）68.4.1jQueryjQuery是一個(gè)極其精簡并且高效的庫，我們可以使用它來快速完成許多動(dòng)畫效果。jQuery庫提供的方法鏈非常適合用來快速添加動(dòng)畫效果，把任何一個(gè)獲取到的DOM元素交給動(dòng)畫效果對象就可以了。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）78.4.2ExtJSExtJS是一套完整的界面部件庫，它提供了構(gòu)建富客戶端Web應(yīng)用程序所需要的全部功能。同時(shí)ExtJS庫也提供了Ext.Fx對象，專門用于實(shí)現(xiàn)各種動(dòng)畫效果。同jQuery庫一樣ExtJS庫也適合用來快速添加動(dòng)畫效果，把任何一個(gè)獲取到的DOM元素交給動(dòng)畫效果對象就可以了。25十二月2023JavaScript語言與Ajax應(yīng)用（第二版）8

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