更新於 2020/02/13閱讀時間約 2 分鐘

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動畫與互動效果
分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.