第08章-利用JavaScript實現(xiàn)動畫效果

JavaScript語言與Ajax應用（第二版）主編董寧陳丹中國水利水電出版社第8章

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

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