写了一个汉字笔顺动画生成工具 (Chinese Stroke Generator)，已用于我的独立站

[yarkyaonj]

大家好，

前段时间在这个节点分享过我做的汉字笔顺查询和练习站（ HanziStroke.com ），感谢当时各位 V 友的反馈和建议。

在开发过程中，我发现市面上虽然有现成的笔顺数据源，但很少有方便后端批量生成 GIF 动画的轻量级工具。

于是我花了一些时间，把网站后端的 核心 GIF 生成逻辑 剥离并整理了出来，做成了一个独立的 CLI 工具，现在开源给大家。

📦 项目地址

Github: https://github.com/Yark-yao/Chinese-Stroke-Order-Generator

🛠 这个工具能做什么？

1. 生成动画： 输入汉字，输出流畅的笔顺 GIF 。
2. 批量处理： 支持传入文本文件，批量生成（比如一次性生成 HSK 1 级的所有生词）。
3. 高度定制： 可以自定义笔画颜色、轮廓颜色、动画速度等。

💻 技术栈

主要是基于 Hanzi Writer+Puppeteer+GIFEncoder 实现的，处理了 SVG 路径到 GIF 帧的渲染逻辑。其实大部分都是 AI 写的。

演示

Live Demo (实际应用效果): https://hanzistroke.com （网站上的所有笔顺动画 gif 图都是用这个脚本生成的）

[rrZ2C]

cool

[yarkyaonj]

@rrZ2C 多谢

[1daydayde]

不错，适合刚开始练字的小学生。再搞一个小程序吧，方便使用。

[IlIl]

不是，一个教写汉字的网站没有中文 i18n ，做着是准备出海给歪果仁使用的么

[yarkyaonj]

@IlIl 是的，出海的网站

[cfu18]

很早以前搞了一个输入汉字生成字贴的小程序，用的也是 Hanzi Writer
某天起，腾讯不备案就搜索不到，
折腾了好久备案还是过不了，一堆理由，放弃

[imsoso]

网站漂亮，适合家里有小学生的

[yarkyaonj]

@imsoso 哈哈 谢谢

[yarkyaonj]

@cfu18 嗯 ，我主要是出海给外国人看的

[marcong95]

好像有一些复杂的笔画的动画有点奇怪，例如号最后一笔的竖横折钩，有种就是一个圆形从左上到右下扩大填充颜色的感觉，并不是真的路径动画的感觉，用 PixPin 录屏后慢放可以证实。不过应该是 Hanzi Writer 的问题？

[febrekuk]

体验了下，给小学生用感觉会很棒，animate 速度再慢一点

[yarkyaonj]

@febrekuk 好的，感谢你的反馈

[yarkyaonj]

@marcong95 收到，我去看看怎么回事，谢谢你的反馈

[dassh]

做得真好！动画确实如#11 说的，慢一点会更好

[yarkyaonj]

@dassh 谢谢你的鼓励，对我很重要

[ludan110]

好厉害的项目！

[yarkyaonj]

@ludan110 感谢你的夸赞，很开心

[manhere]

zdic.net 的体验更好

[yarkyaonj]

@manhere 好的，我去学习一下这个网站，感谢你的反馈

[lyqiang]

之前教小孩笔顺的时候，经常是百度搜一下，如果是多个字就得搜一下删除再搜下一个，嫌麻烦，
后来就做基于 Hanzi Writer 做了一个小程序，可以输入多个字，点哪个看哪个，有需要的可以用起来
「学习成长小助手」

[MrBrand]

我之前也用 Hanzi Writer 搞了非常简约的小程序哈哈哈，小程序名称：工具人助手