2D 动画原理：从分层 SVG 到骨骼、IK、蒙皮与关键帧

这个专栏承接“人物图片转分层 SVG”的资产生成步骤，继续回答一个更难的问题：一组干净图层怎样变成可控制、可复用、不会在关节处露白的动画角色。

路线不是按软件按钮排列，而是按数学依赖排列。先建立局部坐标和父子变换，再用反向运动学求姿态，然后让网格跟随骨骼变形，最后用时间函数控制速度与节奏。

四个阶段解决的是四类不同问题

骨骼、IK、蒙皮和关键帧经常被统称为“角色绑定”，但它们处理的状态并不相同。调试时先判断问题属于坐标、目标求解、几何变形还是时间采样，能避免用错误工具掩盖症状。

阶段	主要输入	核心约束	可观察输出	典型失败
层级变换	局部锚点、父节点、平移/旋转/缩放	`M_world = M_parent M_local`	每根骨骼的世界矩阵和关节位置	绕画布原点旋转、子骨不跟随、矩阵顺序错误
两段 IK	肩点、目标点、两段骨长、肘部方向	`\|a-b\| <= d <= a+b`	肩角、肘角、截断后的末端位置	`acos` 出现 NaN、肘部翻转、超出关节限制
线性混合蒙皮	顶点、逆绑定矩阵、骨骼矩阵、权重	`w_j >= 0` 且 `sum(w_j)=1`	变形后的网格顶点和连续轮廓	关节塌陷、透明白边、权重突变造成裂缝
时间插值	关键帧时间、姿态值、缓动函数	`u=(t-t0)/(t1-t0)`	任意时间点的局部姿态与速度	速度跳变、丢帧后漂移、所有通道机械同步

统一坐标约定

本系列的数值例子使用屏幕坐标：x 向右，y 向下，角度正方向在公式中会明确说明。每个图层的锚点保存在图层局部坐标中，骨长以绑定姿态下两个关节的欧氏距离计算。所有矩阵都按列向量写法应用，因此右侧矩阵先作用；如果你的引擎使用行向量，乘法顺序需要整体反转。

asset layer -> local pivot -> local bone matrix
            -> parent/world matrix -> IK pose
            -> skinning deformation -> timeline sample -> render

一帧的正确顺序是先采样关键帧得到局部角度，再运行 IK 覆盖受约束关节，随后从根节点向下计算世界矩阵，最后对网格执行蒙皮。先蒙皮再求 IK 会使用上一帧矩阵；先把世界角写回局部角则会在父节点旋转时重复累计。

端到端验收记录

不要只看角色“差不多动了”。选一个固定姿态保存锚点、角度、末端坐标和权重和，再比较每次修改前后的数值。下面是一组最小验收项：

父骨旋转 30 度、子骨局部角保持 0 度时，子骨世界角也应为 30 度。
两段骨长为 150 和 125 时，距离肩点 300 的目标应被截断到 275，而不是产生 NaN。
关节区域每个顶点的权重和应在浮点容差内等于 1；绑定姿态下蒙皮前后位置应一致。
持续 800 ms 的动作在 60 Hz、120 Hz 和人为跳过若干帧时，都应在同一真实时间到达终点。
透明背景下分别检查深色和浅色底图，确认关节没有白线、黑边或半透明重叠带。

从素材到运动

先建立坐标，再求姿态、变形和节奏

这条路线从动画资产生成器输出的分层 SVG 开始，依次解释骨骼层级、IK、蒙皮权重和关键帧插值。每一步都提供可操作的浏览器演示。

先生成动画资产

分层资产骨骼层级 IK 蒙皮时间曲线

如何使用这个专栏

如果还没有分层素材，先使用动画资产生成器准备带稳定 ID 的 SVG 图层。
按 01 到 04 阅读。每篇先推导公式，再用页面中的交互演示改变参数。
把公式中的局部坐标、权重和时间值记录下来，再映射到 Spine、Live2D、After Effects 或浏览器 SVG。
遇到关节露白时，不要只加描边；先检查共享边界、重叠余量、权重归一化和 Alpha 合成。

所有交互演示只在当前浏览器运行，不上传图像，也不调用模型 API。