✍️ Tegaki：开源手绘动画神器 让文字秒变动态书写

Tegaki 是一款开源手绘文字动画工具，可将任何文字即时转化为「正在被书写」的动态视觉效果。支持自定义字体、笔触速度、笔画顺序，可导出 SVG/Web 动画格式。内置 CLI 工具，适合视频字幕、教学演示、游戏特效等场景，2.6k Stars 全家桶支持，文末附详细使用教程

🎤 引言

想让文字呈现出「正在被手写」的动画效果，但懒得一帧帧描 SVG 路径？

Tegaki 帮你解决这个问题。给它一个字体文件，它自动解析字形、按照笔画顺序还原书写过程，几秒钟就能生成一段手写动画。GitHub 2.6k Stars，JS/TS 全家桶支持，适合前端开发者集成到视频、课件、游戏里。

⭐ 核心功能

1. 字体解析与笔画动画

Tegaki 支持解析 TTF/OTF/WOFF 等主流字体格式，自动提取字形轮廓数据，按原始笔画顺序生成书写路径。不需要手动描路径，上传字体文件就能跑。

2. 多种输出格式

• SVG 动画：矢量格式，可直接在浏览器里播放，也可导入 Figma/AE 做二次编辑
• Web 动画：HTML5 Canvas + JavaScript，可在网页里实时渲染
• 视频导出：配合工具可导出 MP4/GIF，适合做社交媒体内容

3. 精细参数控制

• 笔触速度：可调快慢，模拟不同书写者的节奏
• 笔画间隔：控制每个笔画之间的停顿
• 笔触粗细：细笔/粗笔效果
• 墨水颜色：支持彩色笔迹

4. 多语言支持

不只是英文/中文，Tegaki 能处理各种语言的字体，包括阿拉伯文、希伯来文等 RTL 语言，以及日文假名、韩文等。

5. CLI 工具

内置命令行工具，CI/CD 流水线里也能跑：

npx tegaki-cli "Hello World" --font ./fonts/handwriting.ttf --output ./output/

📥 安装与使用

快速开始

# Node.js 环境
npm install tegaki

# 或使用 Bun（更快）
bun add tegaki

基础用法（JavaScript）

import { animate } from 'tegaki';

const text = '你好，世界！';
const options = {
  font: './fonts/ChineseHandwriting.ttf',
  strokeDuration: 800,    // 每个笔画 800ms
  strokeGap: 100,        // 笔画间隔 100ms
  strokeWidth: 3,
  color: '#2c3e50'
};

animate(text, options).then(svg => {
  document.body.innerHTML = svg;
});

React 组件

import { TegakiText } from 'tegaki/react';

<TegakiText
  text="开源真好"
  fontUrl="/fonts/handwriting.ttf"
  strokeDuration={600}
  loop={false}
/>

Python 封装（第三方）

如果想在 Python 环境里用，社区也有人封装了 Python 版本：

# pip install python-tegaki
from tegaki import animate_text

svg = animate_text("手写动画", font_path="chinese.ttf")

🎯 适用场景

视频制作：给字幕、配音脚本加上手写动画效果，比静态文字更生动。UP 主、教学视频作者用得比较多。比如 B 站 up 主做编程教程时，用手写动画展示代码逻辑，比截图表格更直观。

教学课件：演示汉字书写顺序、字母拼写过程，比 GIF 素材更灵活。比如教小学生认字，老师可以实时演示每个字的笔画。

游戏开发：RPG 里的信件、卷轴、宝箱文字，用 Tegaki 生成书写动画，沉浸感拉满。比如《原神》里角色打开信封时的书写效果。

社交媒体：Twitter/微博 stories、小红书图文笔记，手写风内容更容易脱颖而出。比如知识博主用「手写笔记」风格做知识卡片。

个人网站：作品集首页、简历页面，加上自己的签名书写动画，个性十足。

⚠️ 注意事项

字体版权：Tegaki 只负责解析和动画，不提供字体。使用前确保字体已获得授权（开源字体如思源手写体、KaFont 等可商用）。

复杂字形性能：笔画特别多的汉字（如龙、龟）解析和渲染会比较慢，实测 200+ 笔画的可能卡顿。

浏览器兼容：SVG 动画依赖 SMIL 或 CSS Animation，老版本 Safari（< 13）可能不兼容。

中日文字体差异：西文字体笔画清晰，动画效果好；中文字体如果轮廓数据不规范，可能出现笔画断裂的情况，建议用专门的手写体字体。

✅ 总结

总的来说，Tegaki 填补了「文字→手写动画」这个垂直场景的工具空白。不需要 After Effects，不用一帧帧 K 帧，上传字体、调参数、导出走人。适合做视频/课件/游戏的开发者或创作者。

唯一要注意的是字体授权问题，别用了盗版字体给自己埋雷。

项目地址：https://github.com/KurtGokhan/tegaki