汉字动画程序的原理

移动应用中有很多幼儿教育应用需要这样一个功能：以动画的方式展示一个汉字怎么写。对外汉语应用有时候也需要这样的功能。

怎么实现呢？

以“地”字为例子：

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

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

笔画动画实现后，下面就是要把汉字分解为一个个的笔画，然后对笔画编号为一定的顺序，对每个笔画动画设定动画轨迹，这样就可实现汉字的动画了。

怎么分解汉字呢？

最简单的方法是在photoshop中手动分解。比如，把一个“地”字分解为“横”、“竖”等等等笔画图像：

这是个体力活，本大人只分解了两笔就不想向下干了。问元芳，你怎么看？元芳说，大人，小滴不识字。

TMD，不识字，劳资的金·瓶·梅怎么会出现在你的房间？

也罢，还是得亲自来。头大啊，分解就很麻烦了，分解完了还要对各图进行编号，寻找轨迹点，岂不要累死本大人！

这时候，本大人一直铭记的程序员的第一美德起作用了。

程序员的第一美德：懒惰！

于是一拍脑门，一个方案出现了——不进行分解，换一种方法，对图像进行多边形约束。

什么是多边形约束呢？看下图：

以“地”字起手一横为例子。找一个多边形，将这个笔画与其它笔画隔开。这个多边形很好画，其中有四点需要精确定位（图上的 a,b,c,d 四点），其余的点就没硬性要求了，只需要能把笔画包起来就行了（当然还得是简单多边形，也就是说，多边形的边不能交叉，不然会影响到后面的实现）。

而几乎每一个UI平台都有绘制path的API，使用这个API，加上上面的多边形约束，就可以在运行时产生一个笔画蒙板：

有了这个蒙板，加上字体的原始图，我们就能知道每一笔画的像素集合（蒙板图AND原始图），添加路径线后【蒙板图 AND 原始图 AND 路径线覆盖图】便是字体动画的帧图。

这种方案的优点：

（1）不需要分解图像，只需要找出汉字图像的笔画分解多边形，也就是放大图打点的过程，开发对应生产工具的话可以将工作量降低很多；

（2）而每个字的动画只需要保存原始图、多边形顶点数据和路径数据，存储量非常小，单个字体4-5K即可；

（3）路径线覆盖图和蒙板图都是在运行时调用系统的API产生的，不需要用图形学算法。

下面是我写的Flash版的实现：

这时候，元芳走过来，虚伪的说：“大人真乃神人也！”

这小兔崽子！