react-rough-notation的RoughNotationGroup分组标注：逐个播放动画与自定义顺序完全指南

react-rough-notation的RoughNotationGroup分组标注：逐个播放动画与自定义顺序完全指南

【免费下载链接】react-rough-notationReact wrapper for rough-notation项目地址: https://gitcode.com/gh_mirrors/re/react-rough-notation

react-rough-notation 是一款为 rough-notation 手绘标注库打造的 React 封装组件库。它的 RoughNotationGroup 分组组件可以让多个标注动画逐个播放，并通过 order 属性自定义播放顺序。本文是一份面向新手的完整指南，帮你快速上手分组标注动画。

📦 快速上手：安装 react-rough-notation 与引入两个核心组件

一行命令安装依赖：

npm install --save react-rough-notation

然后按需引入：

import { RoughNotation, RoughNotationGroup } from 'react-rough-notation'

库中只有两个核心组件：

组件	作用
RoughNotation	给单个元素加手绘标注（下划线、框、圈、荧光笔等），默认渲染为span
RoughNotationGroup	分组容器，统一控制多个标注的播放时机，不渲染任何 HTML 元素，不影响布局

对应源码可参考 RoughNotation.tsx 与 RoughNotationGroup.tsx。

🎬 逐个播放动画：一个 show 属性驱动整组标注

把多个RoughNotation包进RoughNotationGroup，再用一个show状态控制整组：

<RoughNotationGroup show={state.show}> <RoughNotation type="underline">Hello,</RoughNotation> <RoughNotation type="underline">This is</RoughNotation> <RoughNotation type="underline">a Test</RoughNotation> </RoughNotationGroup>

播放原理：show变为true后，分组会按顺序逐个触发子标注的show()——上一个标注动画播放完（时长取其animationDuration，默认 800ms），下一个才自动开始，形成流畅的"依次点亮"效果。当show变回false时，整组标注立即隐藏，未执行的定时器也会被清空。

这段定时链逻辑就写在 RoughNotationGroup.tsx 中，想看懂实现的同学可以直接阅读源码。

🚦 自定义顺序：用 order 属性决定谁先谁后

默认情况下标注按书写顺序播放。如果想改变先后（例如从右往左依次划线），给每个子组件加上order即可：

<RoughNotationGroup show={state.show}> <RoughNotation type="underline" order={3}>Hello,</RoughNotation> <RoughNotation type="underline" order={2}>This is</RoughNotation> <RoughNotation type="underline" order={1}>a Test</RoughNotation> </RoughNotationGroup>

三条关键规则：

• 🥇数字越小越先播：上面的例子会先画 "a Test"，再画 "This is"，最后画 "Hello,"
• 🔢字符串也可以：order="1"会被源码自动parseInt成数字，详见 RoughNotation.tsx
• 🧩支持混用：带order的标注按数值排序先播，不带order的排在后面、按书写顺序补上

排序发生在分组的 reducer 里，完整实现见 RoughNotationGroup.tsx。

⚙️ 常用属性速查表

属性	归属	说明
show	分组 / 单个	是否显示标注；分组上控制整组播放
order	单个	组内播放顺序，数字越小越先播
animationDuration	单个	动画时长（ms），默认 800，也决定组内两个标注之间的间隔
animationDelay	单个	动画开始前的延迟（ms），默认 0
type	单个	标注样式：underline、box、circle、highlight、strike-through、crossed-off、bracket
color/strokeWidth/padding/iterations	单个	标注颜色、线条粗细、间距、笔画迭代次数

其中color、strokeWidth、padding等属性修改后无需重建标注即可生效，非常适合做主题切换。完整属性类型定义见 RoughNotation/types.ts。

🔍 源码揭秘：分组是如何排序和定时播放的

只需三步就能理解整个机制：

1. 自动注册：每个RoughNotation挂载时通过useGroupContext()把自己和order值上报给分组上下文（RoughNotationGroup.tsx）
2. 自动排序：分组的 reducer 把标注拆成"带 order"和"不带 order"两组，前者按order数值升序排列，再拼接成最终播放队列
3. 定时链播放：show为true时，分组用setTimeout逐个排程，每个间隔取该标注自己的animationDuration（未设置则按 800ms 计），实现严格的逐个播放

💡 实用技巧与注意事项

• ⏸️ 播放中途把show设为false可立即隐藏全部标注并清空未完成定时器，天然适合做"停止 / 重置"按钮
• 🎞️ 想让播放节奏更快，调小各标注的animationDuration；想要错落感，可给不同标注设置不同的animationDelay
• 🔁 重新播放动画很简单：把show先置false再置true即可重播整组
• 📐 分组组件不产生任何 DOM，可以放心包裹块级内容，不用担心布局被撑乱

✅ 小结

react-rough-notation 的RoughNotationGroup仅靠show和order两个属性，就实现了"逐个播放动画 + 自定义顺序"的完整能力；配合 7 种手绘标注样式，你可以快速做出富有表现力的页面强调效果。更多属性细节可在 README.md 的文档章节中查阅，动手试一试吧！

【免费下载链接】react-rough-notationReact wrapper for rough-notation项目地址: https://gitcode.com/gh_mirrors/re/react-rough-notation