为什么 agent 做的动画假？因为它没装物理引擎

keyframe 动画有个天生破绽：所有运动都是编排好的，物体被谁碰倒、堆叠怎么垮塌，全靠动画师手调。要「看起来真的发生过」，就得让物理来算。Matter.js 是浏览器里最出名的 2D 刚体物理引擎，1.9 万星、MIT 协议，npm 最新版 0.20.0，README 特别强调它是原生 JavaScript 实现，不是别的引擎的移植版。Google 的 Game of The Year 活动页都在用它，这是本系列第 8 个工具。

一、引擎替你算什么

能力清单相当完整：刚体、复合体、凹凸多边形都能模拟，质量、密度、恢复系数这些物理属性齐备，碰撞检测分宽、中、窄三阶段，堆叠和静止的稳定性是特意调过的。约束系统可以做链条和关节，重力可开可关可反向，还有时间缩放，一个参数切换慢动作和快进。

最小用法三步：建引擎、建刚体、加进世界。

const { Engine, Bodies, Composite } = Matter;

const engine = Engine.create();
const box = Bodies.rectangle(400, 200, 80, 80);
const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
Composite.add(engine.world, [box, ground]);

之后每一帧引擎自己算位置，你只管渲染。它内置了一个 Canvas 渲染器，支持矢量和纹理贴图，做原型够用；正式项目通常接 PixiJS 自己画，物理和渲染完全解耦。

二、官方 demo 就是素材库

brm.io 上有 30 多个官方演示，牛顿摆、破坏球、布料、吊桥、弹弓小游戏、雪崩、软体，基本覆盖了物理动画的全部经典题型。给 agent 的意义在于：这些 demo 的场景描述和参数都是公开的，让它照着改一个「标题字从天而降砸成两截」的效果，比从零发明靠谱得多。

引擎在 Node.js 里也能跑，这点对出片很关键：不依赖浏览器事件循环，就能无头批量模拟、逐帧导出画面，接进渲染流水线。

三、放进流水线的两条纪律

一是分工：弹簧动画（react-spring）是参数驱动的手感，物理引擎是初条件驱动的模拟，标题掉落、粒子倒塌、多米诺这类「一次成型」的效果归 Matter.js。二是确定性：实时 Runner 用的是钟表时间，两次渲染对不齐帧；出序列帧时要自己用固定时间步长调 Engine.update，同样的初条件跑出同样的帧，后面的编码环节才不抖。

下一篇是 Three.js，从这个系列最大牌的选手开始聊 3D。