移动应用中有很多幼儿教育应用需要这样一个功能:以动画的方式展示一个汉字怎么写。对外汉语应用有时候也需要这样的功能。
怎么实现呢?
以“地”字为例子:

汉字“地”由许多笔画组成。单独笔画的动画很容易实现,每次绘制一部分,逐步绘制完全,连贯起来就是动画:

这一步不难,具体实现方法有很多种,这里介绍我采用的方法:几乎所有的UI平台都提供了画线的功能,那么我们就设置一个起始点,设置一个终点,然后在起始点和终点之间画线,线的宽度要足够宽能够覆盖住笔画。这个线和笔画图像重叠的像素就是我们每一步要显示的像素。起始点不动,终点沿着一定轨迹走(最简单的就是沿着直线走),笔画便会一部分一部分的显示,直到全部显示出来。

笔画动画实现后,下面就是要把汉字分解为一个个的笔画,然后对笔画编号为一定的顺序,对每个笔画动画设定动画轨迹,这样就可实现汉字的动画了。
怎么分解汉字呢?
最简单的方法是在photoshop中手动分解。比如,把一个“地”字分解为“横”、“竖”等等等笔画图像:

这是个体力活,本大人只分解了两笔就不想向下干了。问元芳,你怎么看?元芳说,大人,小滴不识字。
TMD,不识字,劳资的金·瓶·梅怎么会出现在你的房间?
也罢,还是得亲自来。头大啊,分解就很麻烦了,分解完了还要对各图进行编号,寻找轨迹点,岂不要累死本大人!
这时候,本大人一直铭记的程序员的第一美德起作用了。
程序员的第一美德:懒惰!
于是一拍脑门,一个方案出现了——不进行分解,换一种方法,对图像进行多边形约束。
什么是多边形约束呢?看下图:

以“地”字起手一横为例子。找一个多边形,将这个笔画与其它笔画隔开。这个多边形很好画,其中有四点需要精确定位(图上的 a,b,c,d 四点),其余的点就没硬性要求了,只需要能把笔画包起来就行了(当然还得是简单多边形,也就是说,多边形的边不能交叉,不然会影响到后面的实现)。
而几乎每一个UI平台都有绘制path的API,使用这个API,加上上面的多边形约束,就可以在运行时产生一个笔画蒙板:

有了这个蒙板,加上字体的原始图,我们就能知道每一笔画的像素集合(蒙板图AND原始图),添加路径线后【蒙板图 AND 原始图 AND 路径线覆盖图】便是字体动画的帧图。
这种方案的优点:
(1)不需要分解图像,只需要找出汉字图像的笔画分解多边形,也就是放大图打点的过程,开发对应生产工具的话可以将工作量降低很多;
(2)而每个字的动画只需要保存原始图、多边形顶点数据和路径数据,存储量非常小,单个字体4-5K即可;
(3)路径线覆盖图和蒙板图都是在运行时调用系统的API产生的,不需要用图形学算法。
下面是我写的Flash版的实现:

这时候,元芳走过来,虚伪的说:“大人真乃神人也!”
这小兔崽子!


http://www.cnblogs.com/xiaotie/archive/2012/10/16/2725570.html