汉字动画程序的原理

简介:

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

怎么实现呢?

以“地”字为例子:

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)

相关文章
|
Linux
linux系统中常见注册函数的使用方法
linux系统中常见注册函数的使用方法
206 1
|
存储 缓存 弹性计算
2024年阿里云最便宜云服务器出炉:61元、165元、99元、199元
2024年截止目前阿里云最便宜的云服务器已经出炉,轻量应用服务器2核2G3M带宽61元1年、2核4G4M带宽165元1年;云服务器经济型e实例2核2G3M带宽99元1年;云服务器通用算力型u1实例2核4G5M带宽199元1年。除此之外,还有幻兽帕鲁Palworld专用服务器4核16G10M带宽只要26.52元/1个月、79.56元/3个月、149.00元/6个月,8核32G10M带宽只要90.60元/1个月、271.80元/3个月。本文为大家分享2024年阿里云最便宜的各个云服务器。
8948 4
2024年阿里云最便宜云服务器出炉:61元、165元、99元、199元
|
分布式计算 关系型数据库 数据库连接
MaxCompute数据问题之数据迁移如何解决
MaxCompute数据包含存储在MaxCompute服务中的表、分区以及其他数据结构;本合集将提供MaxCompute数据的管理和优化指南,以及数据操作中的常见问题和解决策略。
241 0
|
19天前
|
人工智能 移动开发 数据可视化
魔笔 AI Chat Builder:让 AI 对话秒变可交互界面
在 AI 应用高速发展的今天,开发者不仅要懂模型和接口,还要解决交互设计、功能集成、发布运维等“最后一公里”问题。 魔笔 AI Chat Builder 的使命,就是以 低门槛 + 高效率 帮助 开发者与非技术人员 在极短时间内构建、发布并运行专业 AI 应用,让 AI 真正快速落地业务。
魔笔 AI Chat Builder:让 AI 对话秒变可交互界面
|
存储 编解码 5G
LDPC 在 5G-NR 中的标准进展 | 带你读《5G-NR信道编码》之十二
本章节带你了解LDPC 在 5G-NR 中的标准进展 ,观察5G是如何通过LDPC起作用的。
LDPC 在 5G-NR 中的标准进展  | 带你读《5G-NR信道编码》之十二
|
10月前
|
人工智能 开发框架 自然语言处理
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
Eko 是 Fellou AI 推出的开源 AI 代理开发框架,支持自然语言驱动,帮助开发者快速构建从简单指令到复杂工作流的智能代理。
1241 12
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(边框设置)
在HarmonyOS 5.0中,ArkTS提供了丰富的边框设置属性,允许开发者自定义组件的边框样式,提升应用的视觉效果和用户体验。本文详细解读了border属性的使用方法,并提供了示例代码,展示了如何设置不同边的边框宽度、颜色、圆角和样式。边框设置在UI开发中具有重要作用,如区分组件、强调重要元素和美化界面。
1145 6
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
711 3
|
弹性计算 安全 网络安全
阿里云服务器租用流程,四种阿里云服务器租用方式图文教程参考
阿里云服务器可以通过自定义租用、一键租用、云市场租用和活动租用四种方式去租用,不同的租用方式适合不同的用户群体,例如我们只是想租用一款配置较低且可以快速部署应用的云服务器,通常可以选择一键租用或者云市场租用,本文为大家展示不同租用方式的适合对象以及租用流程,以供初次租用阿里云服务器的用户参考和选择。下面是阿里云服务器租用的图文操作步骤。
11530 2
|
前端开发
【threejs教程】终于搞明白了!原来threejs中的透视相机这么简单!
【8月更文挑战第5天】深入学习threejs中的透视相机!
917 2
【threejs教程】终于搞明白了!原来threejs中的透视相机这么简单!