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

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

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

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

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

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

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