汉字动画程序的原理

简介:

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

怎么实现呢?

以“地”字为例子:

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)

相关文章
|
3月前
|
C++
C++语言中的一些小点
C++语言中的一些小点
|
2月前
数字动画404错误页面源码
数字动画404错误页面源码
57 5
数字动画404错误页面源码
|
3月前
【编织代码之纵横字符与绚丽字符串](下)
【编织代码之纵横字符与绚丽字符串]
|
3月前
【编织代码之纵横字符与绚丽字符串](上)
【编织代码之纵横字符与绚丽字符串]
|
3月前
|
C语言
【编织代码之纵横字符与绚丽字符串](中)
【编织代码之纵横字符与绚丽字符串]
|
10月前
|
小程序 数据安全/隐私保护 Python
Python print 函数 \r 转义字符的玩法及解析——转圈效果、动态表情、小数点加载、进度条
Python print 函数 \r 转义字符的玩法及解析——转圈效果、动态表情、小数点加载、进度条
238 0
|
11月前
|
小程序 索引
如何实现文字逐个出现的打字机效果
今天分享一下如何在微信小游戏制作工具中实现文字逐个出现的打字机效果,这个小功能可以用于游戏中的文字对白的展示,如果你要做的是一个文字类游戏的话,那么肯定用的上。
92 0
|
11月前
|
小程序 JavaScript 前端开发
vba 在代码窗口里不能正常显示的双字节字符的转换
vba 在代码窗口里不能正常显示的双字节字符的转换
76 0
|
前端开发 小程序 大数据
你真的会做小程序按钮吗?看了字节35K前端的样式设计,悟了
你真的会做小程序按钮吗?看了字节35K前端的样式设计,悟了
134 0
你真的会做小程序按钮吗?看了字节35K前端的样式设计,悟了
|
JavaScript 前端开发 API
我用最蹩脚的方式写了一个「序列帧动画」 🍂
我用最蹩脚的方式写了一个「序列帧动画」 🍂
127 0