利用時間線制作動畫

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