Animate CC 書寫中文字動畫

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

在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。

目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差的控制，就可以表現更好的書寫中文字動畫。
使用動畫技巧:形狀補間、逐格動畫、遮色片。

Step1.
範例中文字已經依筆畫分散至各圖層上。首先僅顯示筆畫1與背景二圖層，並均於影格15處插入影格；於筆畫1圖層上新增遮色片1，使用矩型工具繪製高度略比筆畫1高的矩型，於影格15插入關鍵影格使用變形工具拉寬矩型覆蓋筆畫1，並建立遮色片1上的形狀補間動畫，設定遮色片圖層的色片功能，完成單一筆畫繪製的動畫。

Step2.
相同方式請繼續完成筆畫2與筆畫3的動畫。繼續顯示筆畫4同樣於影格15插入影格；新增遮色片4，使用筆刷工具繪製可覆蓋筆畫4上端的填色內容，繼續依序插入關鍵影格繪製填色覆蓋筆畫，直至全部覆蓋筆畫為止，並建立遮色片功能。

Step3.
同筆畫4的方式繼續設定筆畫5的遮色片動畫。因此可以判斷文字筆畫內容，若是較不規則的形狀就使用以筆刷工具繪製遮色片內容的逐格動畫方式，若是比較規則的筆畫內容就以色塊形狀補間動畫做為遮色片，來呈現筆畫畫出的動畫。請繼續完成剩下的筆畫，筆畫6、8、9使用形狀補間動畫的方式，筆畫7使用筆刷工具繪製填色的方式，完成所有筆畫的繪製動畫。

Step4.
最後顯示所有圖層與遮色片，依序選取每個筆畫圖層與遮色片圖層，移動影格安排時間順序，並於影格180處為所有圖層插入影格，完成此範例。

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