先画一张静止也成立的图
动画是点缀，不是主菜。在写下第一帧关键帧之前，先用静态形状和标注把整个流程画出来。如果同事把动画关掉也能看懂，你就有了扎实的底子；如果看不懂，动画只会增加噪声。
教学流程图最可靠的模式，是一小组圆角方框加上有向连线。每个方框是一个阶段——一台泵、一个判断、一个水箱；每条线是一次传递——流体、信号、资金或请求。数量要少，三到七个阶段通常最好；再多，读者就从"追踪"变成了"扫视"。
把连线变成流动
结构定下来后，让所有连线采用同一套视觉语言。一条虚线描边加上不断移动的 stroke-dashoffset 就是全部诀窍：虚线看起来沿着线行走，读者立刻能看到传递的方向。既不用重画，也不用加载任何东西。
.flow {
fill: none;
stroke: #2563eb;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 12 9;
animation: travel 1.15s linear infinite;
}
@keyframes travel {
to { stroke-dashoffset: -42; }
}虚线数组设定可见线段与间隙的长度，偏移动画则把整个图案平移。负的偏移让虚线段向前行进，所以一个方向就足以暗示流动。如果图中有两条箭头反向而行，就给它们相反的偏移量，别让它们看起来像同一股水流。
要点：一条会动的虚线，比任何粒子特效都更省、更清晰、更好读——而且它仍然只是矢量几何，缩放到哪里都不糊。
安静胜过繁忙
教学动画最常见的错误是速度。流动快到飞起，前三秒很惊艳，三十秒后就让人疲倦。把虚线放慢，直到眼睛一次只能跟住一段，通常在每秒一到两秒之间一个循环，其余部分保持静止。
- 只动一个属性。只改偏移量，不要同时再平移、缩放或淡入淡出同一个形状。
- 错开启动。让每条连线的动画略微错开，流动就读成一段接一段，而不是一起闪烁。
- 让标注静止。会动的文字既难读又伤检索，把动感留在线上。
先做好停止状态
把它当成永远不会播放动画来设计，因为对某些读者它确实不会播。使用减弱动效设置、网络很慢或打印出来的读者，只会看到静止版本。那个版本清楚，动画就是加分；那个版本不清楚，动画只是在遮住一张孱弱的图。
一份简短的制作清单
- 列出各阶段，以及它们之间传递的方向。
- 把方框、连线和标注画成静态 SVG。
- 给每条连线加上
stroke-dasharray和一段偏移关键帧。 - 确认静止版仍然讲得清流程。
- 把动画包起来，让减弱动效能把它关掉。