Animate CC 書寫中文字動畫
閱讀時間約 1 分鐘
在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。
目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差的控制，就可以表現更好的書寫中文字動畫。
使用動畫技巧:形狀補間、逐格動畫、遮色片。
使用動畫技巧:形狀補間、逐格動畫、遮色片。
Step1.
範例中文字已經依筆畫分散至各圖層上。首先僅顯示筆畫1與背景二圖層，並均於影格15處插入影格；於筆畫1圖層上新增遮色片1，使用矩型工具繪製高度略比筆畫1高的矩型，於影格15插入關鍵影格使用變形工具拉寬矩型覆蓋筆畫1，並建立遮色片1上的形狀補間動畫，設定遮色片圖層的色片功能，完成單一筆畫繪製的動畫。
範例中文字已經依筆畫分散至各圖層上。首先僅顯示筆畫1與背景二圖層，並均於影格15處插入影格；於筆畫1圖層上新增遮色片1，使用矩型工具繪製高度略比筆畫1高的矩型，於影格15插入關鍵影格使用變形工具拉寬矩型覆蓋筆畫1，並建立遮色片1上的形狀補間動畫，設定遮色片圖層的色片功能，完成單一筆畫繪製的動畫。
Step2.
相同方式請繼續完成筆畫2與筆畫3的動畫。繼續顯示筆畫4同樣於影格15插入影格；新增遮色片4，使用筆刷工具繪製可覆蓋筆畫4上端的填色內容，繼續依序插入關鍵影格繪製填色覆蓋筆畫，直至全部覆蓋筆畫為止，並建立遮色片功能。
相同方式請繼續完成筆畫2與筆畫3的動畫。繼續顯示筆畫4同樣於影格15插入影格；新增遮色片4，使用筆刷工具繪製可覆蓋筆畫4上端的填色內容，繼續依序插入關鍵影格繪製填色覆蓋筆畫，直至全部覆蓋筆畫為止，並建立遮色片功能。
Step3.
同筆畫4的方式繼續設定筆畫5的遮色片動畫。因此可以判斷文字筆畫內容，若是較不規則的形狀就使用以筆刷工具繪製遮色片內容的逐格動畫方式，若是比較規則的筆畫內容就以色塊形狀補間動畫做為遮色片，來呈現筆畫畫出的動畫。請繼續完成剩下的筆畫，筆畫6、8、9使用形狀補間動畫的方式，筆畫7使用筆刷工具繪製填色的方式，完成所有筆畫的繪製動畫。
同筆畫4的方式繼續設定筆畫5的遮色片動畫。因此可以判斷文字筆畫內容，若是較不規則的形狀就使用以筆刷工具繪製遮色片內容的逐格動畫方式，若是比較規則的筆畫內容就以色塊形狀補間動畫做為遮色片，來呈現筆畫畫出的動畫。請繼續完成剩下的筆畫，筆畫6、8、9使用形狀補間動畫的方式，筆畫7使用筆刷工具繪製填色的方式，完成所有筆畫的繪製動畫。
Step4.
最後顯示所有圖層與遮色片，依序選取每個筆畫圖層與遮色片圖層，移動影格安排時間順序，並於影格180處為所有圖層插入影格，完成此範例。
最後顯示所有圖層與遮色片，依序選取每個筆畫圖層與遮色片圖層，移動影格安排時間順序，並於影格180處為所有圖層插入影格，完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
哩老師的沙龍 的其他內容
你可能也想看
創作者要怎麼好好休息 + 避免工作過量？《黑貓創作報#4》午安，最近累不累？
這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。
是的，我們這篇講怎麼補充能量，也就是怎麼休息。
2024-06-29
Unity Component | Animator Play and Transition這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
2023-01-09
Unity Animation | 3D Character and Animation這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
2022-09-26
Unity Animation | 高階程式參數控制這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
2022-09-09
Unity Animation | 簡易程式控制這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
2022-09-07