汉字动画程序的原理

  1. 云栖社区>
  2. 博客>
  3. 正文

汉字动画程序的原理

最美的回忆 2017-04-12 16:03:00 浏览681
展开阅读全文

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

怎么实现呢?

以“地”字为例子:

wps_clip_image-2668

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

wps_clip_image-9042

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

wps_clip_image-20978

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

怎么分解汉字呢?

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

wps_clip_image-12747

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

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

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

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

程序员的第一美德:懒惰!

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

什么是多边形约束呢?看下图:

wps_clip_image-2052

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

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

wps_clip_image-14653

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

这种方案的优点:

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

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

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

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

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

这小兔崽子!

本文转自xiaotie博客园博客,原文链接http://www.cnblogs.com/xiaotie/archive/2012/10/16/2725570.html如需转载请自行联系原作者


xiaotie 集异璧实验室(GEBLAB)

网友评论

登录后评论
0/500
评论
最美的回忆
+ 关注