Tegaki React完整教程受控时间、命令式API与流式文本全掌握【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegakiTegaki 是一款 Web 手写笔动画库手書き能把任意字体变成逐笔书写的动画。它的默认导出就是一个 React 组件TegakiRenderer支持 SSR、受控时间controlled time、命令式 APIimperative API和流式文本streaming text——无论是聊天界面、滚动叙事还是 AI 打字机效果一个组件全搞定。本教程带你在 10 分钟内掌握这三项核心能力。快速开始3行代码让文字写出来先安装依赖npm install tegaki然后用内置字体渲染一段文字import { TegakiRenderer } from tegaki; import bundle from tegaki/fonts/caveat; function App() { return ( TegakiRenderer font{bundle} time{{ mode: uncontrolled, speed: 1, loop: true }} style{{ fontSize: 48 }} Hello World /TegakiRenderer ); }组件会逐笔画书写文字天然带上节奏感。内置了 11 款手写字体Caveat、Parisienne、LXGW WenKai 等覆盖拉丁、阿拉伯、日韩中文源码见 packages/renderer/src/react/index.ts更多字体说明看 README.md。受控时间把时间轴交还给你这是 Tegaki React 最强大的能力time属性可以由你的状态驱动文字随进度条/滚动条被书写。用秒数精确控制书写进度传一个纯数字就是受控模式等同于{ mode: controlled, value: 数字 }const [time, setTime] useState(0); input typerange min{0} max{8} step{0.01} value{time} onChange{(e) setTime(Number(e.target.value))} / TegakiRenderer font{bundle} time{time} style{{ fontSize: 48 }} Scrub me! /TegakiRenderer拖动滑块笔迹就跟着前进、倒退可以反复 scrub。time50%这样的百分比字符串则按进度比例0–1解释css模式还会直接读取 CSS 变量配合滚动驱动的 CSS 动画实现滚动即书写的效果无需任何 JS 监听器。时间模式controlled/uncontrolled/css的完整类型定义在 packages/renderer/src/core/types.ts。官方首页的滚动书写演示源码可以照着抄packages/website/src/components/home/ControlledTime.tsx。用 onChangeTimeline 拿到总时长做进度条时需要知道动画总时长用回调而不是手动计算TegakiRenderer font{bundle} time{time} onChangeTimeline{(t) setDuration(t.totalDuration)} .../TegakiRenderer它会在字体加载、文本变化、shaper 解析完成后自动触发拿到的timeline与引擎内部一致。命令式API通过 ref 拿到引擎实例受控属性解决不了暂停一下跳到一半导出SVG这类即时操作这时用命令式句柄。ref会暴露engineTegakiEngine 实例和element容器 DOMconst ref useRefTegakiRendererHandle(null); TegakiRenderer ref{ref} font{bundle} time{{ mode: uncontrolled, speed: 1 }} Hello World /TegakiRenderer // 挂载后调用uncontrolled 模式下生效 ref.current.engine?.pause(); // 暂停 ref.current.engine?.play(); // 继续 ref.current.engine?.seek(50%); // 跳到时间轴一半 ref.current.engine?.restart(); // 从头再来 ref.current.engine?.toSVG({ loop: true }); // 导出自绘制 SVG关键方法play/pause/seek/restart/toSVG/update/destroy都定义在 packages/renderer/src/core/engine.ts。注意play、pause、seek只在uncontrolled模式下生效——受控模式下时间轴由你的time属性掌管直接改状态即可。句柄的类型声明见 TegakiRenderer.tsx。流式文本AI 聊天界面的打字机魔法当文本从 API 或大模型逐块token到达时Tegaki 会自动跟踪不断变长的文本新字符一到就继续书写笔尖始终追赶文字流function StreamingMessage({ text }) { return ( TegakiRenderer font{bundle} time{{ mode: uncontrolled, speed: 4, catchUp: 0.5 }} style{{ fontSize: 32 }} {text} /TegakiRenderer ); }两个调优参数决定体验手感speed基础书写速度倍数AI 输出场景建议3–5catchUp追赶强度。文本缓冲比书写快时自动加速、追平后逐渐回落典型范围0.2–2设为0则关闭追赶。你只需要把累积文本更新到text/children其余全由引擎处理。官方首页的流式聊天演示packages/website/src/components/home/ChatStream.tsx完整调优指南见 guides/streaming.mdx。进阶特效与字体effects属性为书写叠加视觉风格几个最受欢迎的组合effects{{ glow: { radius: 8, color: #00ccff }, pressureWidth: true, strokeGradient: { colors: rainbow }, }}内置字体直接import即可路径如tegaki/fonts/caveat、tegaki/fonts/lxgw-wenkai每款字体都是预生成的笔画数据 子集 TTF位于 packages/renderer/fonts/。没有覆盖的字符会自动走fallbackFont字体栈回退。常见问题开发服务器里文字不动画Vite 7 及以下版本请在vite.config.ts加optimizeDeps: { exclude: [tegaki] }后重启详见 guides/bundlers.mdx。想在 SSR 场景使用组件已适配服务端渲染SSR 阶段安全输出骨架 DOM客户端水合后才启动 Canvas 引擎Next.js 完整示例见 examples/next/app/demo.tsx。如何导出成品engine.toSVG()导出自绘制循环 SVGengine.exportSVG()还会把字体内嵌为 data URI可直接放进 README 或 PPT。参考资料React 官方指南受控时间 命令式句柄 流式packages/website/src/content/docs/frameworks/react.mdx渲染器 API 参考packages/website/src/content/docs/api/renderer.mdx渲染引擎核心实现packages/renderer/src/core/engine.tsReact 组件实现packages/renderer/src/react/TegakiRenderer.tsx掌握受控时间、命令式 API 和流式文本这三招Tegaki 就能覆盖绝大多数手写笔动画场景。打开 Studio 在线把玩参数再把配置搬回代码是你最快的上手路径 ️【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegaki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考