第14講時間軸.ppt

1、第十四講 時間軸 1、認識時間軸 2、創(chuàng)建時間軸動畫,1、認識時間軸,1基本概念 2顯示時間軸 3時間軸面板 4播放選項 5添加對象到時間軸,1.1. 基本概念,動畫的實現(xiàn)原理就是將不同的畫面或者是不同位置的同一個畫面串連起來播放，讓人產(chǎn)生運動的錯覺。時間軸就是利用這個原理來實現(xiàn)頁面中層的動畫效果的的，它的基本單位就是一個畫面，或者叫做幀。在這些畫面中有些畫面起著非常關鍵的作用，可以影響整個動畫的，這樣的幀叫做關鍵幀。 時間軸也稱為時間線，它是一條貫穿時間的橫軸，是時間抽象概念的實體化。時間軸用于表示網(wǎng)頁顯示期間發(fā)生的狀態(tài)變化，用戶將需要運動的網(wǎng)頁對象放入到時間軸的通道里，然后通過對時間軸的的

2、控制來實現(xiàn)網(wǎng)頁的動畫效果。 時間軸的工作過程就是先把多個畫面按順序串聯(lián)起來，然后再按照時間先后順序串起來播放形成動畫。,1.2顯示時間軸,默認情況下，時間軸是不顯示出來的，使用前先將其顯示出來 ，執(zhí)行【窗口】/【時間軸】命令，這樣在屬性面板的下面就打開了【時間軸】面板，如圖所示 。,1.3時間軸面板,時間軸由通道組成。每一個通道里面放一個要運動的物體，其中的關鍵幀用圓點表示，在時間軸上顯示為方塊狀的為播放欄，播放欄所指的位置就是動畫當前所在的幀，如下圖所示。,【時間軸】選項框：指定當前在【時間軸】面板中顯示文檔的哪個時間軸。 播放欄：顯示當前在“文檔”窗口中顯示時間軸的哪一幀。 幀編號：指示幀

3、的序號。在后退按鈕和播放按鈕之間的數(shù)字是當前幀編號。 “行為”通道：是應該在時間軸中特定幀處執(zhí)行的行為的通道。 動畫條：顯示每個對象的動畫的持續(xù)時間。一個行可以包含表示不同對象的多個條。不同的條無法控制同一幀中的同一對象。 關鍵幀：是動畫條中已經(jīng)為對象指定屬性（如位置）的幀。Dreamweaver 8會計算關鍵幀之間幀的中間值，小圓標記表示關鍵幀。 “動畫”通道：顯示用于制作層和圖像動畫的條。,1.4播放選項,：后退至起點將播放欄移至時間軸中的第一幀。 ：后退將播放欄向左移動一幀。單擊“后退”并按住鼠標按鈕可向后播放時間軸。 ：播放將播放欄向右移動一幀。單擊“播放”并按住鼠標按鈕可向前播放時間

4、軸。 【自動播放】復選框：使時間軸于當前頁在瀏覽器中加載時自動開始播放?！白詣硬シ拧睂⒁粋€行為附加到頁的 body 標簽，該行為在頁加載時執(zhí)行“播放時間軸”操作。 【循環(huán)】復選框：循環(huán)使當前時間軸于頁在瀏覽器中打開時無限地循環(huán)。“循環(huán)”在動畫的最后一幀之后將“轉(zhuǎn)到時間軸幀”行為插入到“行為”通道中。在“行為”通道中雙擊該行為的標記可編輯此行為的參數(shù)并更改循環(huán)的次數(shù)。 Fps：每秒運動的幀數(shù)，用戶可以通過設置幀的總數(shù)和每秒幀數(shù) (fps) 來控制動畫的持續(xù)時間。每秒 15 幀這一默認設置是比較適當?shù)钠骄俾剩捎糜谠谕ǔ５?Windows 系統(tǒng)上運行的大多數(shù)瀏覽器。,1.5添加對象到時間軸,時間

5、軸的操作對象一般來說都是層，先創(chuàng)建一個層，按Alt+ F9組合鍵展開【時間軸】面板 ，然后選中層，單擊鼠標右鍵，在右鍵菜單中選擇【添加到時間軸】命令 即可將該層添加到時間軸。,2、 創(chuàng)建時間軸動畫,2.1 基本操作 2.2 創(chuàng)建動畫方法 2.3 關鍵幀方法幀 2.3 錄制路徑方法,2.1基本操作,一、插入關鍵幀 插入關鍵幀方法：將鼠標光標移到時間軸，按住Ctrl鍵，鼠標光標變成小圓圈狀，左鍵單擊需要插入關鍵幀的地方，此時在該位置出現(xiàn)一個小圓圈，表示插入了一個關鍵幀。并且編輯窗口中的層也自動移到與當前幀相對應的軌跡位置上。然后在編輯窗口中將層拖動適當距離后，放開鼠標，即可改變層的運動路徑。 如果

6、要移動關鍵幀，可以直接左鍵單擊選中關鍵幀，然后向左右拖動。 二、添加/刪除幀 如要在時間軸上添加或者刪除幀，則執(zhí)行【修改】/【時間軸】/【添加幀】命令或者執(zhí)行【修改】/【時間軸】/【刪除幀】命令。,三、選中動畫條 動畫條顯示每個對象的動畫的持續(xù)時間，在時間軸中單擊相應的動畫條，即可選中一個動畫條。按住Shift鍵再單擊不同的動畫條，可以同時選中它們。 四、改變動畫時間 左右拖動動畫條最右端的關鍵幀標記，可以改變動畫的播放時間。拖動整個動畫條在時間軸中移動可以改變動畫播放的起止時間。 五、改變動畫的播放速率 動畫的默認播放速率是每秒15幀，這是大多數(shù)瀏覽器的平均速率。用戶可以在【Fps】文本框中

7、輸入數(shù)值來改變播放速率。數(shù)字越大播放越快，但并不是速率越快越好，有的瀏覽器達不到很高的速率時，就將高出的速率忽略。 六、刪除動畫 選中動畫條，按Delete鍵即可將該動畫刪除。 七、自動播放和循環(huán) 若要讓瀏覽器能夠自動播放動畫，則要選中【自動播放】復選框。一般來說都將這一項選中。將【循環(huán)】復選框選中，就可以實現(xiàn)動畫的循環(huán)播放了。,2.2創(chuàng)建動畫方法,時間軸的操作對象主要是層，若要實現(xiàn)對其他網(wǎng)頁對象的動畫設置，必須先將對象放入一個層中，然后才能進行動畫操作 。 創(chuàng)建時間軸動畫，就是往時間通道上添加層，構(gòu)建動畫條，創(chuàng)建關鍵幀，指定層在文檔中處于關鍵幀時的位置，再串聯(lián)播放，從而實現(xiàn)動畫。 利用時間軸和層創(chuàng)建動畫有兩種方法：關鍵幀方法和錄制層路徑方法 。,2.3關鍵幀方法,操作：將層添加到時間軸上 拖動右側(cè)關鍵幀延長時間 單擊第二個關鍵幀后在編輯