Animate CC 高質感倒影陰影文字動畫

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

對於包含了陰影與倒影的文字內容，若要製作字元移動動畫效果時，同樣面臨元件與圖層眾多的問題，因此善用移動補間動畫新增至『自訂移動預設效果』的方式，即可快速套用自訂的動畫效果，迅速完成多元件的文字動畫效果。

目標動畫效果:利用移動補間動畫與移動編輯器，先設定好一個字元的動畫後，再將完成的動畫利用自訂移動預設效果的設定與套用，迅速完成所有文字字元動畫。
使用動畫技巧:影片片段元件、移動補間動畫、自訂移動預設效果。

Step1.
範例練習檔是文字、陰影、倒影元件經過打散分解字元後，每個字元轉換成影片片段元件並分散至圖層後的內容(漸層倒影與陰影元件內容請轉為點陣圖，避免發佈時漸層不正常)，首先請僅留下A相關的三個圖層與背景圖層，其餘圖層暫時隱藏。

依序點取三個A元件，建立移動補間動畫，包含背景圖層於影格100處插入影格，在依序為三個A相關圖層於影格15、20、25、90、100插入關鍵影格（全部）；移動播放磁頭至影格1，顯示所有圖層並移動所有正面元件至場景上方，移動所有倒影元件至場景左下，移動所有陰影元件至原位置右上方。

Step2.
先針對A相關的三個圖層，依序設定關鍵影格上的屬性如下，完成A相關元件的移動補間動畫內容（落下、反彈、移出右側場景外）。

Step3.
點取A正面圖層上的影格，至『移動預設效果』控制版上按下新增自訂預設效果按鈕，新增預設效果『正面移動』。相同方式點取A倒影圖層上的影格，新增預設效果『倒影移動』，點取A陰影圖層上的影格，新增預設效果『陰影移動』，完成三個自訂移動預設效果的新增。

移動播放磁頭回到影格1，選取到NIMATE正面元件移至上方場景外，並選取自訂移動效果上的『正面移動』，按下套用完成正面元件的動畫；選取到NIMATE倒影元件，並選取自訂移動效果上的『倒影移動』，按下套用完成倒影元件的動畫；選取到NIMATE陰影元件，並選取自訂移動效果上的『陰影移動』，按下套用完成陰影元件的動畫。

Step4.
整理圖層影格順序，以每個字元三個圖層（正面、陰影、倒影）為依據，整理成相差10影格的時間差，最後於影格180處為所有圖層插入影格，完成此範例動畫。

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