利用時(shí)間線制作動(dòng)畫

利用時(shí)間線制作動(dòng)畫第1頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月時(shí)間線，大家一定不會(huì)陌生，許多動(dòng)畫軟件（如directro、flash等）都有它的蹤影。Timeline(時(shí)間線)是DW的技術(shù)精華之一，運(yùn)用時(shí)間線可以輕松創(chuàng)建動(dòng)畫，不用任何插件。第2頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.1認(rèn)識(shí)時(shí)間線時(shí)間線是一種用來(lái)控制網(wǎng)頁(yè)中的層在每一秒的位置的工具。對(duì)DW來(lái)說(shuō)，時(shí)間線是真正體現(xiàn)網(wǎng)頁(yè)魅力的手段。用時(shí)間線可以實(shí)現(xiàn)動(dòng)畫。動(dòng)畫的實(shí)現(xiàn)原理是將畫面連起來(lái)播放，產(chǎn)生運(yùn)動(dòng)的效果，所以動(dòng)畫的基本單位就是一個(gè)畫面，也叫做幀。在動(dòng)畫中有些畫面是關(guān)鍵的，可以影響整個(gè)動(dòng)畫，這樣的幀叫做關(guān)鍵幀。第3頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.2創(chuàng)建時(shí)間線動(dòng)畫時(shí)間線通過(guò)不同的時(shí)間改變層的位置、大小、可見性和疊放順序等來(lái)創(chuàng)建動(dòng)畫。時(shí)間線不能直接控制頁(yè)面中的對(duì)象，它控制的是放置這些對(duì)象的層，如果要使圖像、文本等對(duì)象產(chǎn)生動(dòng)畫效果，必須將其置于層中。下面我們創(chuàng)建一個(gè)最簡(jiǎn)單的時(shí)間線動(dòng)畫，以對(duì)時(shí)間線有一個(gè)最基本的了解。第4頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.2.1一個(gè)簡(jiǎn)單的直線運(yùn)動(dòng)的時(shí)間線動(dòng)畫1.設(shè)計(jì)目標(biāo)：建立一個(gè)做直線運(yùn)動(dòng)的時(shí)間線動(dòng)畫。2、素材準(zhǔn)備：將網(wǎng)頁(yè)中需要用到的圖片放置到本地站點(diǎn)內(nèi)。說(shuō)明：為網(wǎng)頁(yè)添加背景圖像的方法如下：按ctrl+j鍵，在彈出的“頁(yè)面屬性”對(duì)話框中，單擊“背景圖片”進(jìn)行設(shè)置。第5頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月3.實(shí)現(xiàn)步驟：（1）在頁(yè)面中添加一個(gè)新層，在層中插入圖像，然后將層移動(dòng)到動(dòng)畫的起始位置。（2）在菜單欄中選擇“窗口”“時(shí)間線”命令打開時(shí)間線面板。（3）選擇要?jiǎng)?chuàng)建動(dòng)畫的層。（4）單擊時(shí)間線面板中的彈出菜單按鈕，在彈出的菜單中選擇“添加對(duì)象”或用鼠標(biāo)拖動(dòng)圖層到時(shí)間線的第一幀處。第6頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（5）當(dāng)?shù)谝淮卧跁r(shí)間線中添加對(duì)象時(shí)，會(huì)彈出提示框，告訴你可以改變?cè)搶拥拇笮?、位置、層順序以及可見性。單擊“確定”按鈕，這時(shí)在時(shí)間線通道中將出現(xiàn)一個(gè)紫色動(dòng)畫條，動(dòng)畫條中顯示了層的名稱。第7頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（6）單擊動(dòng)畫條尾部的關(guān)鍵幀位置（注意播放頭也跟著移動(dòng)到該處），將動(dòng)畫層移動(dòng)到動(dòng)畫結(jié)束的位置，這時(shí)從動(dòng)畫起始位置到結(jié)束位置有一條線顯示，這就是層的運(yùn)動(dòng)軌跡。（7）按播放按鈕，可直接在網(wǎng)頁(yè)中預(yù)覽時(shí)間線動(dòng)畫。層的運(yùn)動(dòng)軌跡第8頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（8）如果想在瀏覽器中預(yù)覽動(dòng)畫效果，應(yīng)該進(jìn)行以下設(shè)置：A、選中“自動(dòng)播放”復(fù)選框，否則瀏覽器中的動(dòng)畫是不會(huì)自動(dòng)播放的。B、選中“循環(huán)”復(fù)選框，否則動(dòng)畫只在瀏覽器中播放一次。C、預(yù)覽網(wǎng)頁(yè)，網(wǎng)頁(yè)保存到本地站點(diǎn)內(nèi)。第9頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.2.2認(rèn)識(shí)時(shí)間線面板“timeline(時(shí)間線)”面板描繪了層和圖像隨時(shí)間變化的屬性。在菜單欄中選擇“窗口”“其它”“時(shí)間軸”命令打開時(shí)間線面板。時(shí)間線面板所包含的控件如下：時(shí)間線下拉菜單返回首幀后退一幀播放頭所在幀播放每稱幀數(shù)行為通道幀數(shù)動(dòng)畫通道行為通道播放頭動(dòng)畫條第10頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月時(shí)間線下拉菜單：指定當(dāng)前文檔的哪個(gè)時(shí)間線顯示在時(shí)間線面板上。行為通道：顯示時(shí)間線中某個(gè)特定幀應(yīng)執(zhí)行的行為，淺藍(lán)色方塊表示行為的存在。播放頭：表示當(dāng)前動(dòng)畫播放的位置，用紅色方塊表示。動(dòng)畫通道：共支持32個(gè)通道，一旦某個(gè)通道上有動(dòng)畫，就會(huì)顯示動(dòng)畫條，一個(gè)通道上可以包含多個(gè)代表不同對(duì)象的動(dòng)畫條。第11頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月動(dòng)畫條：顯示每個(gè)對(duì)象持續(xù)的時(shí)間，不同動(dòng)畫條在同一幀內(nèi)不能控制相同對(duì)象。關(guān)鍵幀：指為某個(gè)對(duì)象指定屬性的幀，兩個(gè)關(guān)鍵幀之間的過(guò)渡幀由DW自動(dòng)生成，有小圓圈標(biāo)記的是關(guān)鍵幀。返回首幀：將播放頭移到時(shí)間線的第一幀后退一幀：將播放頭向左移一幀，單擊并按住鼠標(biāo)不放可連續(xù)反向播放時(shí)間線第12頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月播放頭所在幀：顯示播放頭當(dāng)前所在幀的位置播放：將播放頭向右移動(dòng)一幀，單擊并按住鼠標(biāo)不放可以連續(xù)播放時(shí)間線每秒幀數(shù)：Fps是動(dòng)畫播放的速度，默認(rèn)設(shè)置是每秒15幀。Fps的值越大，相同幀數(shù)的動(dòng)畫顯示的速度越快。通過(guò)設(shè)置總幀數(shù)和每秒幀數(shù)，可以控制動(dòng)畫的持續(xù)時(shí)間自動(dòng)播放：選擇該復(fù)選框，則頁(yè)面在載入瀏覽器后自動(dòng)播放動(dòng)畫循環(huán)：選擇該復(fù)選框，則頁(yè)面動(dòng)畫播放完畢后自動(dòng)重新播放。第13頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.2.3一個(gè)曲線運(yùn)動(dòng)的時(shí)間線動(dòng)畫之前我們制作的動(dòng)畫是最簡(jiǎn)單的只有起點(diǎn)與終點(diǎn)的直線運(yùn)動(dòng)的動(dòng)畫。如果僅僅這樣看起來(lái)很生硬，下面我們來(lái)制作曲線運(yùn)動(dòng)的時(shí)間線實(shí)例，讓小鳥運(yùn)動(dòng)的路徑變成彎曲的。1.設(shè)計(jì)目標(biāo)：把做直線運(yùn)動(dòng)的時(shí)間線動(dòng)畫，改為做曲線運(yùn)動(dòng)。第14頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月2.實(shí)現(xiàn)步驟（1）打開制作鳥的動(dòng)畫保存的網(wǎng)頁(yè)（2）打開時(shí)間線面板，在時(shí)間線面板中，取消“循環(huán)”復(fù)選框。（3）用鼠標(biāo)拖拽動(dòng)畫條右端關(guān)鍵幀標(biāo)記，將第15幀拖拽到第45幀處，改變動(dòng)畫長(zhǎng)度，并選擇第45幀（我們對(duì)幀長(zhǎng)進(jìn)行擴(kuò)充，如果在15幀內(nèi)完成顯得太倉(cāng)促了，45幀長(zhǎng)度相對(duì)適中）。第15頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（4）選擇動(dòng)畫條的第15幀，單擊鼠標(biāo)右鍵（或鼠標(biāo)左鍵單擊時(shí)間線面板中的彈出菜單按鈕），從彈出的快捷菜單中選擇“增加關(guān)鍵幀”，添加一個(gè)關(guān)鍵幀。（5）移動(dòng)層使運(yùn)動(dòng)軌跡呈現(xiàn)曲線狀。（6）按ctrl鍵，單擊動(dòng)畫條的第30幀，再添加一個(gè)關(guān)鍵幀。（7）移動(dòng)層使運(yùn)動(dòng)軌跡呈現(xiàn)曲線狀。第16頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月移動(dòng)層使運(yùn)動(dòng)軌跡呈曲線狀態(tài)第17頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（8）選中“循環(huán)”復(fù)選框，預(yù)覽動(dòng)畫效果。（9）通過(guò)預(yù)覽動(dòng)畫，發(fā)現(xiàn)小鳥的飛行速度太快，可以將“Fps”中的每秒幀數(shù)從15改為8，這樣可以降低小鳥的飛行速度。（10）保存網(wǎng)頁(yè)文件。對(duì)于初學(xué)者來(lái)說(shuō)，在建立時(shí)間線動(dòng)畫時(shí)有時(shí)會(huì)遇到這樣的問(wèn)題：明明是按照書上的步驟做的，但就是無(wú)法顯示出層的運(yùn)動(dòng)軌跡，這樣就無(wú)法使層動(dòng)起來(lái)，原因有：第18頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（1）在選擇創(chuàng)建動(dòng)畫時(shí)，選中的不是層，而是把層中的對(duì)象（如圖像等）選中，這樣加到時(shí)間線中的對(duì)象就不是層，而是層中的對(duì)象，這時(shí)再移動(dòng)層自然不會(huì)出現(xiàn)層的運(yùn)動(dòng)軌跡。正確的方法是一定要選中層，選擇圖像和選擇層的區(qū)別如圖：第19頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（2）選中的不是動(dòng)畫條尾部的關(guān)鍵幀，而是動(dòng)畫條尾部的普通幀。對(duì)于普通幀來(lái)說(shuō)，其位置的特性與它前面的關(guān)鍵幀相同，所以這時(shí)移動(dòng)層也不會(huì)出現(xiàn)層的運(yùn)動(dòng)軌跡。從這個(gè)例子中知道，要使動(dòng)畫做曲線運(yùn)動(dòng)，首選必須在適當(dāng)?shù)奈恢眉尤腙P(guān)鍵幀，然后對(duì)應(yīng)的關(guān)鍵幀處移動(dòng)動(dòng)畫層。當(dāng)曲線運(yùn)動(dòng)的軌跡較簡(jiǎn)單時(shí)，這種方法簡(jiǎn)單有效；但要?jiǎng)?chuàng)建復(fù)雜軌跡的動(dòng)畫時(shí)，這種方法就顯得比較麻煩了。下面介紹一種拖動(dòng)層記錄路徑的方法，可以很方便地創(chuàng)建復(fù)雜軌跡的動(dòng)畫。第20頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.2.4創(chuàng)建復(fù)雜路徑的時(shí)間線動(dòng)畫實(shí)例1.設(shè)計(jì)目標(biāo)：創(chuàng)建具有復(fù)雜路徑的時(shí)間線動(dòng)畫，使動(dòng)畫的運(yùn)行路線完全由用戶設(shè)定。2.頁(yè)面分析：創(chuàng)建具有復(fù)雜路徑的時(shí)間線動(dòng)畫，如果僅僅只是添加關(guān)鍵幀，則制作過(guò)程將會(huì)相當(dāng)麻煩，并且不容易控制。在這種情況下，使用拖動(dòng)時(shí)記錄層的路徑的方法將會(huì)更方便，可以創(chuàng)建任意復(fù)雜路徑的動(dòng)畫。第21頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月3.實(shí)現(xiàn)步驟（1）新建一個(gè)圖層，并在圖層中插入圖像。移動(dòng)該層到動(dòng)畫的起始位置。（2）在菜單中選擇“修改”“時(shí)間軸”“錄制層路徑”命令;或單擊彈出菜單按鈕，從彈出的快捷菜單中選擇“錄制層路徑”（3）在頁(yè)面上按自己的意愿拖動(dòng)圖層以創(chuàng)建路徑。第22頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月拖動(dòng)層記錄移動(dòng)路徑（生成不規(guī)則的運(yùn)動(dòng)軌跡）（4）在動(dòng)畫的結(jié)束位置處釋放鼠標(biāo)，DW會(huì)自動(dòng)在時(shí)間線中添加一個(gè)動(dòng)畫條，并添加適當(dāng)數(shù)量的關(guān)鍵幀。第23頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（5）選中“自動(dòng)播放”和“循環(huán)”復(fù)選框。（6）預(yù)覽動(dòng)畫，將網(wǎng)頁(yè)保存到本地站點(diǎn)中。系統(tǒng)自動(dòng)生成適當(dāng)數(shù)量的關(guān)鍵幀第24頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.3使用時(shí)間線改變圖像和層屬性除了可利用時(shí)間線移動(dòng)層之外，還可以用時(shí)間線在不同的關(guān)鍵幀改變圖像的源文件、層的大小、可見性和疊放順序，從頁(yè)增強(qiáng)動(dòng)畫效果。下面通過(guò)兩個(gè)實(shí)例，分別介紹利用時(shí)間線改變圖像的源文件實(shí)現(xiàn)幻燈片效果和通過(guò)改變層的大小實(shí)現(xiàn)圖像的漸推式顯示效果。第25頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.3.1實(shí)現(xiàn)幻燈片效果（不用層）幻燈片用flash制作非常容易，效果也非常好，可是它需要插件的支持。用java制作，則影響網(wǎng)頁(yè)的瀏覽速度。使用DW也可以實(shí)現(xiàn)，它的效果雖不及flash和java，但是它有著制作簡(jiǎn)單、瀏覽速度快、無(wú)需插件支持等優(yōu)越性。用DW實(shí)現(xiàn)幻燈片的效果有兩種，一種是利用時(shí)間線和顯示隱藏圖層的方法實(shí)現(xiàn)；第26頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月另一種則是利用image的方式實(shí)現(xiàn)。前者要做幾張幻燈片就需要幾個(gè)隱含層，并要利用behaviors（行為）事件進(jìn)行顯示-隱藏層的操作，實(shí)現(xiàn)起來(lái)比較麻煩；后者則是利用時(shí)間線可以改變圖像的src屬性，并在不同的時(shí)間顯示不同的圖像的特點(diǎn)，使用image動(dòng)畫條，要做幾張幻燈片就設(shè)置幾個(gè)關(guān)鍵幀，通過(guò)在關(guān)鍵幀處改變圖像來(lái)源文件的方法來(lái)實(shí)現(xiàn)，簡(jiǎn)單易行。下面介紹第二種方法：第27頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月1.設(shè)計(jì)目標(biāo)：實(shí)現(xiàn)幻燈片的輪流播放效果，使一組圖像不停地輪換顯示。2.素材準(zhǔn)備：先準(zhǔn)備3張大小相同的圖像，否則會(huì)有變形的情況發(fā)生。3.實(shí)現(xiàn)步驟（1）在對(duì)象面板中單擊圖片按鈕，插入第一張圖像。（2）確認(rèn)時(shí)間線面板已打開，選取剛插入的圖像，將其拖拽到時(shí)間線面板中。第28頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（3）當(dāng)出現(xiàn)提示框時(shí)，單擊“確定”按鈕，這時(shí)在時(shí)間線通道中將出現(xiàn)一個(gè)紫色動(dòng)畫條，動(dòng)畫條中顯示了圖像的名稱。（4）用鼠標(biāo)拖拽動(dòng)畫條右端關(guān)鍵幀標(biāo)記，將第15幀拖拽到第30幀處，改變動(dòng)畫長(zhǎng)度（5）打開屬性面板，在菜單欄中選擇“窗口”“屬性”（6）按ctrl鍵，單擊動(dòng)畫條的第10幀，添加一個(gè)關(guān)鍵幀。第29頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（7）在屬性面板的“源文件”欄輸入該關(guān)鍵幀顯示的第二張圖象的路徑及文件名，或單擊“源文件”欄右邊的瀏覽按鈕，在彈出的“選擇圖像源”對(duì)話框中選擇源文件。（8）重復(fù)步驟（6）、（7），在動(dòng)畫的第20幀處添加關(guān)鍵幀，并插入第三張圖像。（9）選中“自動(dòng)播放”和“循環(huán)”復(fù)選框。（10）保存預(yù)覽動(dòng)畫。小技巧：可以將圖像插入層中，在時(shí)間線面板中再增加一個(gè)層動(dòng)畫條，并按前面所介紹的方法，讓層運(yùn)動(dòng)起來(lái)，這樣頁(yè)面上就有一個(gè)一邊運(yùn)動(dòng)一邊譯制內(nèi)容的“幻燈片”第30頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月8.3.2實(shí)現(xiàn)圖像的漸推式顯示效果時(shí)間線可以包含圖層和圖像對(duì)象。在時(shí)間線中除了可以移動(dòng)層之外，還可以改變圖像的源文件，改變圖層的可見性、大小、層疊順序。下面將給大家介紹通過(guò)改變圖層的大小屬性，從而實(shí)現(xiàn)從左向右逐漸推出圖像的動(dòng)畫效果。1.設(shè)計(jì)目標(biāo)：一幅圖像從左向右逐漸推出顯示，像卷軸一樣展開。第31頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月2.素材準(zhǔn)備：本網(wǎng)頁(yè)中用到圖片一張3.實(shí)現(xiàn)步驟（1）在頁(yè)面中添加一個(gè)新層，并選中層（2）在屬性面板中，將層的“寬度”屬性設(shè)置為1px(像素)；在“背景圖片”中導(dǎo)入一張準(zhǔn)備好的圖片做背景。（3）用鼠標(biāo)拖拽所選擇的層到時(shí)間線面板的第一幀處。（4）單擊動(dòng)畫條尾部的關(guān)鍵幀標(biāo)記，然后拖動(dòng)層的調(diào)整柄，使層的寬度與背景圖像的寬度相等，以便顯示全部背景圖像。第32頁(yè)，課件共35頁(yè)，創(chuàng)作于2023年2月（5）選中“自動(dòng)播放”和“循環(huán)”復(fù)選框。（6）預(yù)覽網(wǎng)頁(yè)動(dòng)畫，可發(fā)現(xiàn)隨著層由窄變寬，背景圖像也象卷軸一樣展開。（7）將網(wǎng)頁(yè)保存。第33頁(yè)，課件共35頁(yè)，創(chuàng)作于2