更新於 2020/02/07閱讀時間約 3 分鐘

Animate CC 畫線與色塊變形繪圖動畫

應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間動畫、變形編輯、時間軸圖層內容控制。
Step1. 在範例檔中首先僅顯示邊框圖層、暫時隱藏其他圖層,點取左側邊框線並剪下,新增邊框1圖層,在該圖層上執行『編輯 在原地貼上』原位置貼上左側邊框於邊框1圖層上,相同方式請依序剪下下方邊框原位置貼至新增的邊框2圖層,剪下右側邊框並原位置貼上新增的邊框3圖層,最後邊框圖層名稱改為邊框4,完成四邊框分散至四獨立圖層的整理準備。
Step2. 暫時隱藏邊框2-4,於邊框1的影格6插入關鍵影格,移動播放磁頭至影格1選取邊框下半部並直接刪除成僅留下上方短的邊框,建立形狀補間動畫完成由上至下畫線動畫。 顯示邊框2圖層,選取並移動關鍵影格至影格7處,於邊框2的影格12插入關鍵影格,移動播放磁頭至影格6選取邊框右半部並直接刪除成僅留下左方短的邊框,建立形狀補間動畫完成由左至右畫線動畫。
顯示邊框3圖層,選取並移動關鍵影格至影格13處,於邊框3的影格18插入關鍵影格,移動播放磁頭至影格13選取邊框上半部並直接刪除成僅留下下方短的邊框,建立形狀補間動畫完成由下至上畫線動畫。 顯示邊框4圖層,選取並移動關鍵影格至影格19處,於邊框4的影格24插入關鍵影格,移動播放磁頭至影格19選取邊框左半部並直接刪除成僅留下右方短的邊框,建立形狀補間動畫完成由右至左畫線動畫。
Step3. 至影格100處為四個邊框圖層均插入影格,完成邊框繪製動畫並鎖定完成的四邊框圖層。顯示填色圖層並移動關鍵影格至影格24處,於影格36處插入關鍵影格、影格100處插入影格,移動播放磁頭至影格24,點取填色物件並等比例縮小至最小(按住Shift),建立影格24-36間的形狀補間,完成矩型色塊放大動畫並鎖定填色圖層。
Step4. 顯示內容圖層並移動關鍵影格至影格36處,於影格100處插入影格。新增空白圖層於內容圖層之上並命名為遮色片,於影格36處插入關鍵影格,使用橢圓工具繪製紅色填色無邊框的正圓形於門把上,做為遮色片內容。
至影格50處插入關鍵影格,使用變形工具等比例放大(Shift)圓形至可完全覆蓋內容圖層,建立影格36-50間的形狀補間動畫,設定遮色片圖層的遮色片功能,完成以遮色片控制顯示內容的動畫。
Step5. 顯示『門框線』、『門』、『內容挖去門』、『漸層光』四圖層,並移動四圖層關鍵影格至影格60處,在遮色片與內容二圖層的影格60處『插入空白關鍵影格』來中斷二圖層內容的顯示,即是影格60後改以上方圖層內容為主。為『門框線』、『門』、『內容挖去門』、『漸層光』四圖層影格100處插入影格。
Step6. 於『門』圖層的影格75處插入關鍵影格,顯示『影子』圖層並移動影子圖層關鍵影格至影格75處,於影格100處插入影格。點取門圖層的關鍵影格75,使用變形工具的扭曲變形,扭曲門的右上角與右下角,讓右下角與影子位置相府合,建立門圖層影格50-75的形狀補間動畫,並設定減速100。
Step7. 複製影子圖層的關鍵影格75至影格61處貼上影格,暫時隱藏門圖層並使用移動工具直接調整影子內容成如圖所示,建立影子圖層影格61-75間的形狀補間動畫、減速100,顯示門圖層完成開門與門影子的動畫內容。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.