移動應用中有很多幼兒教育應用需要這樣一個功能:以動畫的方式展示一個漢字怎么寫。對外漢語應用有時候也需要這樣的功能。
怎么實現呢?
以“地”字為例子:
漢字“地”由許多筆畫組成。單獨筆畫的動畫很容易實現,每次繪制一部分,逐步繪制完全,連貫起來就是動畫:
這一步不難,具體實現方法有很多種,這里介紹我采用的方法:幾乎所有的UI平台都提供了畫線的功能,那么我們就設置一個起始點,設置一個終點,然后在起始點和終點之間畫線,線的寬度要足夠寬能夠覆蓋住筆畫。這個線和筆畫圖像重疊的像素就是我們每一步要顯示的像素。起始點不動,終點沿着一定軌跡走(最簡單的就是沿着直線走),筆畫便會一部分一部分的顯示,直到全部顯示出來。
筆畫動畫實現后,下面就是要把漢字分解為一個個的筆畫,然后對筆畫編號為一定的順序,對每個筆畫動畫設定動畫軌跡,這樣就可實現漢字的動畫了。
怎么分解漢字呢?
最簡單的方法是在photoshop中手動分解。比如,把一個“地”字分解為“橫”、“豎”等等等筆畫圖像:
這是個體力活,本大人只分解了兩筆就不想向下干了。問元芳,你怎么看?元芳說,大人,小滴不識字。
TMD,不識字,勞資的金·瓶·梅怎么會出現在你的房間?
也罷,還是得親自來。頭大啊,分解就很麻煩了,分解完了還要對各圖進行編號,尋找軌跡點,豈不要累死本大人!
這時候,本大人一直銘記的程序員的第一美德起作用了。
程序員的第一美德:懶惰!
於是一拍腦門,一個方案出現了——不進行分解,換一種方法,對圖像進行多邊形約束。
什么是多邊形約束呢?看下圖:
以“地”字起手一橫為例子。找一個多邊形,將這個筆畫與其它筆畫隔開。這個多邊形很好畫,其中有四點需要精確定位(圖上的 a,b,c,d 四點),其余的點就沒硬性要求了,只需要能把筆畫包起來就行了(當然還得是簡單多邊形,也就是說,多邊形的邊不能交叉,不然會影響到后面的實現)。
而幾乎每一個UI平台都有繪制path的API,使用這個API,加上上面的多邊形約束,就可以在運行時產生一個筆畫蒙板:
有了這個蒙板,加上字體的原始圖,我們就能知道每一筆畫的像素集合(蒙板圖AND原始圖),添加路徑線后【蒙板圖 AND 原始圖 AND 路徑線覆蓋圖】便是字體動畫的幀圖。
這種方案的優點:
(1)不需要分解圖像,只需要找出漢字圖像的筆畫分解多邊形,也就是放大圖打點的過程,開發對應生產工具的話可以將工作量降低很多;
(2)而每個字的動畫只需要保存原始圖、多邊形頂點數據和路徑數據,存儲量非常小,單個字體4-5K即可;
(3)路徑線覆蓋圖和蒙板圖都是在運行時調用系統的API產生的,不需要用圖形學算法。
下面是我寫的Flash版的實現:
這時候,元芳走過來,虛偽的說:“大人真乃神人也!”
這小兔崽子!






