事物运转机制动态可视化科普讲解技能-已经发布到WorkBuddy技能市场

大家好，我是人月聊IT。

今天继续分享结合我个人的思维方法论，在AI辅助下如何对一个事物内部运行机制动态科普讲解的一个方法。该方法我已经做出免费的WorkBuddy技能，可以到我文章最后的地址搜索和下载安装使用。

机械手表、直列四缸发动机、滚动转子式空调压缩机，这三样东西看起来毫不相干。可我把它们各做成一张动态原理图之后才发现，三页的骨架几乎是同一个，换掉的只是血肉。下面说的就是这套骨架。它不是我先想出来的框架，是被三个主题轮流逼出来的固定做法，现在换任何新主题，我照着走就行。

一张静态剖面图，讲不动时间

做机械手表那一页，我最初的想法很简单。画一张机芯剖面图，把条盒轮、二轮、三轮、四轮、擒纵轮、擒纵叉、摆轮逐个标出，配上每个轮的齿数，读者应该自己能看懂。图确实画出来了，齿轮的位置也算准了。拿给一个不玩表的朋友看，他盯了半分钟，问了一句，这些轮子往哪边转，谁带动谁。

这不是画工的问题。一张图停在某个瞬间，天然不带时间轴。画箭头只能标出此刻的转向，说不清这一秒里它究竟转过了多少；把齿轮画得一大一小，大小也说不出一个八小时才转一圈、另一个一小时要转九百六十圈。结构看得见，时间关系看不见，这是所有原理讲解共同卡住的位置。

后来做发动机和压缩机，我在同一堵墙上又撞了两次。发动机那张图能标出活塞、连杆、曲轴、气门的位置，可气门到底在哪个角度开、哪个角度关，静态图答不上来。压缩机那张图能画清气缸、转子、滑片，可压力怎么从零点九五兆帕爬到三点一五，静态图同样答不上来。三个毫不相干的主题，卡在同一个地方。

所以我给自己定了一条起点。要讲原理，就不能只交一张图，要交一个会动的教具。它得能自己转起来，让人先建立整体的节奏感；还得能停住，一帧一帧往前推，看清每一步谁动了、谁没动。这个念头长出了后面整套东西，也就是我固定使用的交互教学页，和撑住它的六阶段认知链。

六阶段认知链：顺序本身就是方法

六个阶段是表象观察、静态分解、动态分析、动静融合、环境场景、复盘自测。第一次看到的人常会觉得，这只是把内容切成六块，先后顺序无关紧要。我的经验恰好相反，顺序本身就是方法的一半。前三节从外面往里面走，第四节把两条线拧在一起，后两节把视野推远再收回来。三页做下来，这个顺序一次都没动过。

图片

第一节表象观察最容易被跳过，因为所有人都急着拆结构，而这一节的任务恰恰是不拆，只描述输入和输出。手表我写的是，发条里的弹性势能被切成每秒八份的等时脉冲，再变成指针的角位置。发动机我写的是，喝汽油、吐废气，输出旋转动力。压缩机我写的是，把低压气态冷媒吸进来、压成高压排出去。三句话里没有一个零件名。

第二节静态分解要遵守 MECE，同层粒度一致，并且按功能分组，不按外形分组。手表分成储能与上条、走时轮系、擒纵调速、显示轮系四组；发动机分成曲柄连杆机构、配气机构、机体组、点火四组；压缩机分成压缩本体、驱动、轴承密封三组。依据都是它承担什么职责。按外形分，很容易分出轮子、弹簧这种没用的类目，读者拿到手里仍然不知道谁在干什么。

第三节动态分析才第一次出现时间，做法是把一次完整运行切成几个阶段，每个阶段写清各部件的状态，还有这一步在干什么。这里我立了一条硬规矩，讲结构的时候不夹流程，讲流程的时候不补新结构，违反它讲出来的东西会立刻变浑浊。到了第四节动静融合，两条线才被允许汇合，核心动作只有两个字，映射：部件摆成行，阶段摆成列，逐格填这一刻它做什么。

同一个数字八，三种不一样的切法

图片

三页的步骤条都停在八步，这个巧合我自己也愣过一下。但八这个数字是结果，不是规则，切分的依据完全不同。手表的一圈是摆轮一次完整振荡的零点二五秒；发动机的一圈是曲轴转两圈的七百二十度；压缩机的一圈是转子转一圈的三百六十度。三个主题，三种时间刻度。

手表的循环最不好切，因为一圈之内的动作极不均匀。绝大部分时间是静止的锁止，真正的动作挤在极短的解锁和冲量里。我后来按摆轮的节拍切，每拍两个节点，四次振荡正好八步。这样切的好处是，擒纵叉那一跳的位置天然落在节点上，读者能看清擒纵轮为什么一跳一跳，答案是每拍只前进半个齿。

发动机的切法跟着冲程走，一个气缸要转两圈才完成一轮，进气、压缩、做功、排气各占一百八十度，我在每个冲程的中点再切一刀。压缩机的切法最不直观，它一圈里滑片两侧同时在干活，一侧吸气、另一侧压缩排气，所以八个节点不能按冲程平分，得挑压力曲线拐得最厉害的位置，二百一十度、三百三十度都在名单上。

三页切完我才想清楚一件事，切点不该由我来定，该由系统自己的自然节律来定。手表跟摆轮走，发动机跟冲程走，压缩机跟压力曲线的拐点走。硬按等分去切，会切出一堆什么也没发生的废节点，读者点过去只会觉得无聊，那样的分步模式等于没做。

动画的第一原则是精确，不是好看

整页里最花时间的是顶部那张会动的剖面图。它和一般动画最大的区别在于，所有运动必须由数学公式逐帧驱动，不接受看起来差不多。这句话不是洁癖。教学动画一旦出现明显的比例错误或者穿模，学过的人会当场失去信任，没学过的人会把错误的印象记下来带走。

手表这一页，我先把整套齿数配比定死。条盒轮八十齿带十齿小齿轮，二轮六十四齿带八齿小齿轮，三轮六十齿带八齿小齿轮，四轮八十齿带五齿小齿轮，逐级传动比分别是八、八、七点五、十六。再由齿数反推每个轮子的角速度，从条盒轮每八小时一圈，一路推到擒纵轮每小时九百六十圈。数字定死了，画面才有资格动。

图片

发动机这一页的硬骨头是滑块曲柄机构。活塞不是匀速上下，它在上止点和下止点附近慢、行程中段快，这个快慢差必须用连杆比算出来。压缩机这一页更依赖公式。转子外圆始终与缸壁内切，偏心距等于气缸半径减转子半径，实测三点九三毫米，滑片行程恰好是它的两倍；压缩腔压力按多变过程算，与容积比的若干次方成正比。

三页的公式各不一样，纪律是同一条，先把数算对，再让图动起来。顺序反过来的话，画面会先骗过你的眼睛，然后骗过你的判断。我在技能里把这一条写成硬性要求，凡是自称动态原理图的，都要能拿出驱动它的那组公式，而且公式里的每个参数都要有出处，不能是随手调出来的好看数字。

齿轮咬不上、活塞撞缸、阀片提前开

最麻烦的一处是齿轮的啮合相位。两个齿轮要画得真的咬得上，必须满足一个约束，一个轮的齿中心正对着啮合点方向时，另一个轮必须正好是齿槽中心对着这一点。写成公式就是两个齿序号之和模一之后恒等于零点五。我按这个不变式反推每个齿轮的初始相位偏移，算完的误差在十的负十四次方量级。

还有一处是不做数值校验绝对发现不了的坑。小齿轮如果沿用和大齿轮一样的齿顶高，画面上完全看不出问题，几何上它的齿顶已经顶死在大轮的齿槽里。我写脚本把每一对啮合齿轮的边逐条做线段相交判定，第一遍查出六百多次侵入，最深的有两毫米多。把十个齿以下的小齿轮改成短齿顶之后，侵入降到零次。

同类陷阱在发动机和压缩机里换了面孔又出现。发动机里如果活塞行程和缸盖高度对不上，上止点会撞缸；压缩机里最典型的是排气阀片，它只认压差、不认角度，很多人想当然地写成转到固定角度就开，实际上压比越大开得越晚、排量越小。这类错误画面上看不出来，得靠数值去逼。这也划出一条分界线，做数值校验的动画是教具，不做校验的只是插画，插画好看，却教不了人。

自动运转与分步定格，回答的是两个问题

这张动画必须有两种模式，两种都不能省。自动模式让它连续转下去，回答的是整体是什么感觉；分步模式切成关键时刻，点一下走一步，回答的是这一步为什么会发生。缺了自动模式，读者不知道系统平时怎么呼吸；缺了分步模式，读者只能在快进里猜因果。

分步模式还逼出了另一样东西，每一步只配一句话，这句话必须说清谁动了、为什么，中间没有空间注水。我经常是在写这一句的时候才发现，自己对某个阶段其实没想明白，然后回头补模型。写作在这里变成一次自检，不只是表达。三页的步骤文案加起来不到三千字，改的时间远比写长。

点一下齿轮，看它亮了哪一块

页面下方的部件卡片和上方的动画之间，有一根看不见的线。点任意一张部件卡，动画里对应的零件会亮起来，两秒后自动熄灭，页面同时滚回动画区。实现上很简单，一张部件名到元素编号的映射表，加一条样式规则，几十行代码。它把零件长什么样和零件在哪转这两份分开的印象，在读者的手指上合成了一个动作。

图片

第四节那张映射表是全页最要紧的一张表。竖着看，是一列上所有部件在这一刻的集体状态，也就是协同；横着看，是一个部件在整轮循环里的完整职责。同一张表能读出两种东西。填表时我加了一条限制，每个格子不许写参与、起作用这种话，必须落成具体动作。这条限制看着小，它决定了这张表有没有用。

这一节结尾要回答一个问题，哪个外在行为是单独一个部件做不到的。三个主题给出的答案完全不同。手表是恒定的走时频率，擒纵轮自己转得飞快，摆轮自己只会来回晃，咬在一起才出现每秒八拍；发动机是连续的动力输出，四个缸首尾接力才拼成没有断点的一条；压缩机更彻底，九个零件里没有一个是负责压缩的，压力是容积在几何上变小、再配上单向阀口爬上去的。

把这三句放一起看，涌现这个说法才落了地。它不是一个修辞，是一个可检验的提问方式。你拆到最细，逐个零件去问，这件事你能单独做到吗，全都答不能，那个外在行为就属于整体，不属于任何一个零件。同一个问法，我在三页里用的是同一条。

把镜头拉远，再逼一遍输出

第五节环境场景是把镜头往后拉，主体之外还有一批不能缺的东西。手表的表壳表镜挡灰，宝石轴承降摩擦，佩戴者的动作负责上条；发动机要进气系统供气、点火系统供高压电、冷却系统带走余热；压缩机要蒸发器供气、冷凝器接收、节流装置维持压差。做法都是同一个，逐个去问，拆掉它，外在行为还在不在。

图片

压缩机这一节最能说明问题。拆掉节流装置，系统高低压被拉平，压比趋近于一，压缩机只是空搅；拆掉冷冻油，油膜一破，内漏加高温，几分钟就能烧毁；拆掉冷凝器，排气压力一路飙升，电机直接过载。全部问完之后，系统的边界自然就画出来了，讲解也就有了明确的适用范围。

第六节是四到六道选择题，答完立刻给对错和一句解析。第一题我固定用来考方法论本身，也就是认知顺序；中间几题考关键机制和传导链；末题考协同和涌现。三页都是六道题，第一题和末题的位置一次都没动过。收尾还有一句口诀，比如发动机那页是吸压爆排、两圈一轮、四缸接力、动力不断。十几字写不出来，说明我还没把整条链压到主干上。

不跑完校验，不算交付

技能里有一张交付前的校验清单，一共六个大项。JavaScript 语法能不能解析，运动边界数值是否越界，所有被引用的元素编号是否齐全，步骤数据是否单调递增且数量在六到十个之间，全文是否真的零外部依赖，然后在真实浏览器里把自动、分步、高亮、自测四个交互各走一遍。前面五项可以交给脚本，第六项必须自己看过。

手表这一页的校验脚本写得比较重，一共十段。传动比和角速度逐条对数，齿轮啮合的相位不变式，每对齿轮的边与边相交次数，擒纵轮每拍前进的角度，摆轮摆幅的上下限，擒纵叉瓦石的位移是否等于半个齿距。跑完的结论是，四对啮合齿轮最短齿面间隙零点零六七单位，相交零次。这份脚本改一改参数，就成了发动机和压缩机那两页的校验骨架。

脚本之外还有一层。我另外用一个最小的 DOM 环境，在 Node 里真实执行页面脚本，驱动两百帧，检查生成物里有没有 NaN、有没有负半径、每一帧的变换是不是合法数值，再把八个步骤的定格角度跟理论值逐个比对。它相当于把页面在无人值守的状态下点了一遍，比肉眼看动画扎实得多。

这一层查出了一处静态审查永远查不出的问题。步骤条的按钮用了内联的 onclick，而它引用的变量在闭包里面，浏览器里一点就会报未定义。代码能跑通，语法没问题，变量名也写对了，唯独第一次点击就崩。所以我把真实渲染单独列成一项，坚持用影子环境跑一遍交互，而不是打开页面看一眼动画转不转就算过。

把它固化成技能，而不是一次性的作品

机械手表那一页做完之后，我没有停在又多了一个作品，而是把过程里所有可以复用的东西抽出来，做成了一个技能包。包里放着方法论文档、动画技术规范、页面结构规范、一个页面骨架模板，还有一份完整的成品示例。后来做发动机和压缩机，我只换了血肉，骨架和纪律没有重想一遍。

三页放在一起看，重复的部分长得吓人。都是八步、六张环境卡、六道自测题、一句口诀。这不是偷懒，是把一个主题的解法沉淀成了流水线，真正换掉的只是齿数配比、曲柄相位、偏心距这些数值。技能里最值钱的部分也不是代码，是那些看起来像补丁的规则，比如讲结构时不夹流程，比如第一题考方法论，比如每个格子不许写起作用，比如校验不做完不算交付。

这些规则单看都很琐碎，几个放在一起，就构成了一条能重复输出质量的流水线。方法论的价值大概就在这里，它不提高某一次的上限，它保证下限。回到最开始那个问题，那个朋友想要的并不是一张更清楚的图，而是一个能让他自己动手推一遍的场子。把时间这个维度还给读者，让他们能停下来看、能往前推，直到自己讲得出来。

具体技能已经发布到Skills-hub技能市场。

图片

搜索dynamic-principle-visualizer可以直接下载或在WorkBuddy里面直接搜索进行安装使用。