Animate CC 遮色片場景與產品動畫效果

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

目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫表現產品出現效果，再搭配形狀補間動畫的遮色片技巧，細膩表現產品的動態呈現。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。

Step1.
範例檔元件庫中包含了所有將進行動畫的元件（直接由場景上轉換成元件而來）。

場景上也將每個元件分散至各個獨自圖層，另外為了方便練習，時間軸上預先繪製了需要的遮色片（舞台遮色片、背景漸層遮色片、相機遮色片、相機倒影遮色片，是依畫面內容繪製的填色物件，先暫時隱藏）。

暫時隱藏背景以外的圖層，新增背景遮色片圖層於背景圖層之上，繪製長條形色塊於版面中央，再至影格15處插入關鍵影格並直接變形色塊覆蓋住背景內容，回影格1設定長條色塊寬為1像素並置中於場景，建立影格1-10之間形狀補間動畫並設定起遮色片功能，二圖層於影格100處插入影格。

Step2.
顯示背景流線圖圖層並移動關鍵影格至影格15處並於影格100插入影格，新增流線遮色片圖層於上方，至影格15處插入影格，繪製長條形色塊於版面左側，再至影格40處插入關鍵影格並直接變形色塊覆蓋住流線內容，建立形狀補間動畫並設定起遮色片。

Step3.
顯示舞台與舞台遮色片圖層並移動關鍵影格至影格30處，並於影格100插入影格，再至影格50處插入關鍵影格並放大至足夠覆蓋整個舞台，建立形狀補間動畫並設定起遮色片。

顯示LOGO圖層並移動關鍵影格至影格60處，往後在影格65、70、75插入關鍵影格、至影格100插入影格，移動關鍵影格60上的LOGO至上方場景外並設定Alpha=0，向下略移動關鍵影格65上的LOGO、向上略移動關鍵影格70上的LOGO，建立傳統補間設定加/減速（依序為-100、100、-100）。

Step4.
顯示並點取上漸層遮色片，轉換為影片片段元件『左右移動漸層光』，由場景上直接按二下『左右移動漸層光』元件進入元件內，新增圖層於原圖層之下並置入漸層元件於左側場景外。

在影格15、30處插入關鍵影格，設定影格15上的漸層至場景右側，均建立傳統補間動畫與設定遮色片作用，再於影格60處插入影格。

顯示亮白內舞台與亮白外舞台圖層並移動關鍵影格至影格65處，並均設定元件Alpha=30，繼續為此二圖層於影格70、75、80、85、90處插入關鍵影格，於影格100插入影格；在亮白內舞台圖層上縮小影格65、75、85元件並設定Alpha=0，在亮白外舞台圖層上於影格65、75、85設定Alpha=0，均建立傳統補間並移動亮白外舞台圖層影格區段至影格75處。

Step5.
移動相機與二相機遮色片圖層關鍵影格至影格75處並顯示相機圖層，再新增相機倒影圖層複製貼上相機圖層的關鍵影格，移動相機倒影圖層至相機倒影遮色片之下，四圖層均於影格100處插入影格。

再於相機與相機倒影圖層影格100處插入關鍵影格，並暫時隱藏相機圖層，於相機倒影圖層的影格100處，向上移動相機元件至遮色片範圍之外，並建立傳統補間動畫，啟動相機倒影遮色片圖層的遮色片功能。

Step6.
顯示相機與相機遮色片圖層，於相機圖層的影格75處，向下移動相機元件至遮色片範圍之外，並建立傳統補間動畫，再設定相機遮色片圖層的遮色片功能，完成相機從舞台中移出動畫。

最後新增閃爍反光圖層於最上方並於影格100處插入關鍵影格，置入閃爍反光元件於閃光燈處並放大，所有圖層於影格240處插入影格，完成此範例。

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