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動畫與互動效果