Animate CC 進階照片光澤與動畫效果

【檢視範例】【下載範例】

目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫技巧，細膩表現車子產品動作動畫，包括反光光澤，完成亮眼產品介紹。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。

Step1. 範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。

直接進入車子影片片段元件內，於車身圖層影格30、35、40處插入關鍵影格，向上移動影格35與40上的車身元件，影格35上的移動較多，建立傳統補間表現車子煞車時的震動，車底圖層於影格40處插入影格。

Step2. 新增影片片段元件『輪子轉』，置入輪轉圖元件並置中，於影格30處插入關鍵影格，建立傳統補間動畫，設定順時針旋轉一圈。新增圖層『前輪轉』，置入輪子轉元件並使用自由變形工具縮放、傾斜、旋轉來變形輪子轉元件，讓他與前車輪圈角度、尺寸相符合；相同方式再新增後輪轉圖層，同樣置入輪子轉元件並使用自由變形工具，調整與後車輪圈角度、尺寸相符合。

Step3. 繼續在車子元件內，於前輪轉、後輪轉二圖層影格25、30處插入關鍵影格，並移除31之後的影格，設定影格30上二輪子轉元件顏色效果Alpha:0 ％，建立影格25-30間傳統補間動畫。

Step4. 回到場景上，於元件庫上重製車子元件為『車子光澤』，進入車子光澤元件內，刪除前後輪轉圖層，反選車身與車底圖層的影格1-39，並刪除影格，留下原來的影格40上內容。

新增遮色片圖層，並置入遮色片元件對齊車子內容；再新增漸層光圖層於遮色片圖層之下，置入漸層光元件於車子左上角，並選轉漸層光成傾斜，於漸層光圖層上影格30、60處插入關鍵影格，其餘圖層於影格60處插入影格，移動影格30上的漸層光至右下角，建立傳統補間動畫，設定影格1-30加減速：-100、影格30-60加減速100，最後啟動遮色片圖層的遮色片功能完成車子光澤效果。

Step5. 回到場景上，車子圖層於影格30、40插入關鍵影格（背景圖層於影格40插入影格），選取影格1的車子元件，等比例縮小並移動至場景左側的起始位置，建立影格1-30間的傳統補間、設定加減速：-100。新增車子光澤圖層，於影格40插入關鍵影格，置入車子光澤元件並對齊下方的移動車子（以輪子為對齊依據），對齊正確後，再移動車子光澤圖層的關鍵影格40至影格41處。

最後於影格100處為車子光澤與背景二圖層插入影格，完成此動畫。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果