Animate動畫設計實例教程 課件 任務七 遮罩層動畫的應用

任務七

遮罩層動畫的應用Animate動畫設計案例教程CONTENTS目錄1.任務分析2.難點剖析3.相關知識4.案例實現(xiàn)5.任務總結6.提高創(chuàng)新01任務分析知識目標技能目標素質(zhì)目標思政目標素質(zhì)目標對遮罩技術的靈活應用。技能目標能夠制作、編輯遮罩層動畫；能夠設計遮罩技術實現(xiàn)的動畫效果。知識目標思政目標培養(yǎng)學生虛心求學，以誠待人的優(yōu)秀品德。任務分析掌握遮罩層動畫的設計思想；掌握遮罩圖層、被遮罩圖層的區(qū)別；掌握遮罩層動畫的制作方法。02難點剖析遮罩圖層被遮罩圖層遮罩技術需要至少兩個圖層才能實現(xiàn)—遮罩圖層和被遮罩圖層。遮罩圖層充當顯示方式的設置，被遮罩層放置顯示內(nèi)容。初學者往往分不清哪個對象應該放置在遮罩層，哪個對象應該放置在被遮罩層。這也是本章通過諸多案例來訓練的重點、難點。難點剖析03相關知識遮罩層動畫遮罩層動畫的注意事項編輯遮罩層動畫遮罩層動畫1.遮罩層動畫1．遮罩動畫的設計思路遮罩層動畫至少有兩個圖層，上面圖層為“遮罩層”，下面圖層為“被遮罩層”；兩個圖層重疊的地方被顯示。也可以制作多層遮罩動畫，即一個遮罩層同時遮罩多個被遮罩層的遮罩動畫。2．知識記憶①下面圖層——被遮罩層：放置要顯示的內(nèi)容（可以是動畫或靜態(tài)的）。上面圖層——遮罩層：設置內(nèi)容的顯示區(qū)域（可以是動畫或靜態(tài)的）。②兩個圖層重疊的部分被顯示。③遮罩動畫顯示的顏色完全由被遮罩層內(nèi)容的顏色決定。相關知識3．建立遮罩關系①新建圖層：被遮罩層，放入人物圖形。在圖層上方新建圖層“遮罩層”，繪制橢圓，將橢圓位置調(diào)整到人物的頭部。②右擊上面的圖層，選擇“遮罩層”命令，即將該圖層設置為遮罩層，其下方相鄰的圖層變?yōu)楸徽谡謱?。遮罩關系建立后，兩個圖層被自動鎖定。2.編輯遮罩層動畫1.圖層解鎖，進入遮罩動畫的編輯模式。

解鎖后，遮罩效果不顯示，如下圖所示，可以調(diào)整兩個圖層的內(nèi)容。

修改完成后，將圖層再次鎖定，又正常顯示遮罩效果。相關知識2.正確的遮罩關系如左圖。右圖，遮罩關系沒有建立修改方法有以下兩種：向被遮罩層的右上（遮罩層的右下）方拖動被遮罩層。右擊被遮罩圖層，在彈出的快捷菜單中選擇“屬性”命令，在彈出的“圖層屬性”對話框中，將圖層類型改為“被遮罩”。3.遮罩層動畫的注意事項1．遮罩層不支持多個對象如果在制作過程中，遮罩層有多個對象（對象包括元件實例、文本、繪制對象、組），只顯示第一個對象的遮罩效果。解決方法：將多個對象分離（按Ctrl+B組合鍵）為形狀。2．遮罩層不支持線條（筆觸顏色）如果在制作過程中，遮罩層使用到了線條（筆觸顏色），則不能顯示遮罩的效果。解決方法：選擇線條，選擇菜單命令：“修改”—“形狀”—“將線條轉換為填充”，可以將線條轉換為填充相關知識3．遮罩不支持部分字體針對部分字體，會出現(xiàn)兩種情況的錯誤：①制作過程中有些字體的遮罩效果不能正常顯示。②編輯狀態(tài)，遮罩效果正常顯示；測試影片時，遮罩效果不顯示。解決方法：修改字體或者將文本分離為形狀。如果文字較少，則建議直接將文本對象分離為形狀。

04案例實現(xiàn)基礎遮罩效果圖片切換水流動畫—池中景1.基礎遮罩效果1．手繪效果——針對練習：遮罩層有多個對象學習目標：掌握用遮罩技術實現(xiàn)手繪效果的方法。實現(xiàn)效果：圖片內(nèi)容一點兒一點兒地顯示出來，先顯示荷葉、蜻蜓，再顯示文字。設計思路：遮罩層：逐幀涂抹動畫；被遮罩層：“小荷才露尖尖角”畫作。1.基礎遮罩效果2．發(fā)光效果——針對練習：遮罩層不支持線條學習目標：掌握經(jīng)典的發(fā)光效果的制作方法。實現(xiàn)效果：在五角星后面，光線不停地閃爍并發(fā)散著金黃色的光芒。設計思路：繪制線條，轉換為填充，調(diào)整中心點，旋轉復制形成造型后，利用線條的交叉互逆運動實現(xiàn)發(fā)光效果。遮罩層：線條處理后的造型。被遮罩層：水平翻造型，做旋轉運動。廣告欣賞1.基礎遮罩效果3．廣告中的線條運動實現(xiàn)效果：神秘光線從舞臺上劃過，充滿誘惑。設計思路：該效果技巧性很高，是網(wǎng)頁廣告中比較典型的遮罩技術的應用。該效果要顯示的是熒光球的漸變色，顯示區(qū)域是線條。遮罩層：線條（轉換為填充）。被遮罩層：運動的熒光。①遮罩層，繪制線條，并將線條轉換為填充。②被遮罩層，熒光球沿線條做由左到右的運動。注意：熒光球（徑向漸變：中心Alpha值為100，外側Alpha值為0），才能出現(xiàn)線條兩端尖尖的效果。1.基礎遮罩效果4．流水文字效果——針對練習：遮罩不支持部分字體學習目標：重復顏色在遮罩動畫中應用。實現(xiàn)效果：文字上方好像水流流過。設計思路：在遮罩動畫中，利用顏色的交替顯示來模擬水流效果。要顯示的是交替顏色矩形的左右移動；顯示區(qū)域是小橋流水人家。遮罩層：文本“StayHungryStayFoolish”。被遮罩層：移動的矩形。1.基礎遮罩效果5．光束劃過文字效果學習目標：普通圖層和遮罩效果共同組成動畫效果。實現(xiàn)效果：一束黃光從愛人者，仁恒愛之，敬人者，人恒敬之上劃過。設計思路：黃白色光束劃過文字的效果是遮罩動畫效果。藍色文字一直顯示，黃色文字通過遮罩技術顯示。需要3個圖層。黃色文字的顯示，通過遮罩動畫實現(xiàn)，該效果需要兩個圖層。遮罩層：文本。被遮罩層：運動的光束。普通層：藍色文本。2.水流動畫—池中景學習目標：掌握使用遮罩技術制作水流的方法。實現(xiàn)效果：清涼的音樂中，氣墊船在水流的流動下微微晃動，邀人共享清涼。設計思路：水流在水面上流動。該動畫的難點在于理解水流為什么會動。需要3個圖層。水流流動的效果通過遮罩動畫實現(xiàn)，該效果需要兩個圖層。遮罩層：線條（用線條的運動模擬水波）；被遮罩層：水面。靜止的水面。普通圖層：女孩。2.水流動畫—池中景1．普通圖層導入位圖，設置舞臺和圖片一樣大小。將圖層重命名為：女孩。鎖定，隱藏該圖層。2．制作水波的流動效果（遮罩動畫）3．制作氣墊船晃動效果新建圖層：氣墊船。將“庫”面板中的位圖拖動到舞臺上，調(diào)整其與舞臺大小一樣。分離，將氣墊船摳出，轉換為元件。⑦在第15、30、45、60幀處插入關鍵幀，分別在各關鍵幀里略微調(diào)整氣墊船的角度（0°、-1.6°、0°、1.3°）、上下位置，創(chuàng)建傳統(tǒng)補間動畫，形成氣墊船微微晃動的效果。3．標題2.水流動畫—池中景1．普通圖層導入位圖，設置舞臺和圖片一樣大小。將圖層重命名為：女孩。鎖定，隱藏該圖層。2．制作水波的流動效果（遮罩動畫）①復制“女孩”圖層，重命名為水面，作為動畫的被遮罩層。②新建圖層：線條。繪制線條，并調(diào)整線條為弧形形狀，轉換為填充。選擇所有線條，按F8鍵將其轉換為圖形元件“線條”，在60幀處插入關鍵幀，移動線條的位置，創(chuàng)建傳統(tǒng)補間動畫。③右擊上面的圖層，選擇“遮罩層”命令，創(chuàng)建遮罩關系，測試看到水流效果。④解鎖女孩圖層，發(fā)現(xiàn)看不到水流效果了。⑤將被遮罩層：水面圖層的圖片向右、向下各移動一個像素。⑥新建圖層：氣墊船。將“庫”面板中的位圖拖動到舞臺上，調(diào)整其與舞臺大小一樣。分離，將氣墊船摳出，轉換為元件。⑦在第15、30、45、60幀處插入關鍵幀，分別在各關鍵幀里略微調(diào)整氣墊船的角度（0°—-1.6°—0°—1.3°）、上下位置，創(chuàng)建傳統(tǒng)補間動畫，形成氣墊船微微晃動的效果。⑧

新建圖層：標題。3.圖片切換學習目標：掌握遮罩層有多個運動對象的處理方法。實現(xiàn)效果：隨著多個矩形的變大，風景圖片切換到下一張風景圖。設計思路：一張圖片一直顯示，一張圖片通過遮罩技術顯示。需要3個圖層。圖片2通過遮罩動畫實現(xiàn)，該效果需要兩個圖層。遮罩層：多個矩形的運動動畫實例。被遮罩層：圖片2。普通圖層：圖片1.05任務總結任務總結

遮罩動畫效果變化萬千，但總歸是一點：將要顯示的對象放在被遮罩層，將顯示