2d-character-rig-animation

2D 角色骨骼动画

在角色设计和经过批准的模型／参考表完成后使用此技能。它旨在将设计转化为可重复使用的表演系统，使各部分保持连接、姿势符合设定、面部状态清晰易读，并且动画能够在不同镜头和运行时中复现。

骨骼可以采用 SVG、分层矢量图、栅格分件、骨骼与网格组成的木偶，或混合形式。运行时 API 各不相同，但制作规范不变。

范围

此技能负责：

• 部件拆分、绘制顺序、层级、轴心、控制项和约束；
• 绑定／静止姿势和坐标约定；
• 刚性分件与可变形网格的选择；
• 可重复使用的身体姿势、面部状态、视素、手势和循环动作；
• 使用经过批准的角色进行表演和编排；
• 确定性动画交接和绑定专属质量检查；
• 绑定资产权利、肖像使用限制、来源信息和交付说明。

此技能不负责：

• 角色的视觉身份、服装连续性或参考图生成策略；
• 3D 骨架、体积变形或特定 DCC 的绑定；
• 动作捕捉数据的采集、清理或重定向；
• 配音表演、口型同步服务商的选择或最终合成；
• 通过重新设计已获批准的角色来掩盖绑定缺陷。

证据说明

• 有据可查的事实： 来自 SVG/W3C、浏览器、无障碍或其他权威技术文档的行为。
• 制作经验法则： 必须根据设计和运行时加以调整的动画或绑定做法。
• 实证观察： 从实际绑定预览、帧采样、渲染或交付裁切中测得的表现。

技术参考资料已于 2026-07-12 核查。特定运行时的变换、裁切、网格变形、IK 和导出行为变化较快；确定绑定架构前，请先验证所选渲染器及其版本。

明确绑定规范

收集或准备：

• 经过批准的转面图／模型表和角色设定文档；
• 准确的交付要求、宽高比、分辨率、fps、时长和候选运行时；
• 所需视图、动作、情绪范围、对话语言、道具和互动；
• 绑定使用刚性部件、可变形网格、替换件还是混合形式；
• 肢体弯曲、伸展、挤压／拉伸、转头和透视处理的最大幅度；
• 身体和面部控制项清单；
• 命名、坐标、单位、轴心和变换顺序规则；
• 原始美术、表演者肖像、字体、道具和品牌权利；
• 确定性时间轴格式和渲染器交接方式；
• 审核姿势和测试动作。

如果经过批准的设计无法拆分或变形，且不会造成明显损坏，请根据具体制作限制退回设计阶段。切勿擅自修改人体结构、服装、标志位置、残障呈现或标志性特征。

按照动作职责拆分美术

在独立运动、遮挡、变形、替换或附着需要的地方拆分角色。部件过少会限制表演；部件过多则会造成接缝、绘制顺序问题和维护成本。

典型职责：

character-root
+- shadow
+- rear-accessories
+- pelvis
|  +- torso-chain
|  |  +- chest
|  |  |  +- neck
|  |  |  |  `- head
|  |  |  +- arm-left
|  |  |  `- arm-right
|  |  `- clothing-overlap
|  +- leg-left
|  `- leg-right
+- front-accessories
`- fx-and-contact-guides

面部可以使用嵌套控制项，分别控制眉毛、眼睑、瞳孔、嘴部替换件／变形、脸颊，以及可选的转头特征。

制作经验法则：

• 在自然关节、接缝、发束、衣物层和刚性配饰处分离。
• 在可见边缘之外增加重叠区域，避免旋转时出现缝隙。
• 确保在预期播放尺寸下轮廓清晰。
• 左右命名以角色视角为准，并记录这一约定。
• 如果运行时支持，将绘制顺序与变换层级分开管理。
• 使用导出后仍稳定的 ASCII ID；避免只用图层编号命名。

坐标系和 SVG 结构

文档记载： SVG 会建立视口和用户坐标系。viewBox 会将指定矩形映射到视口中，变换可以应用于元素和组。嵌套组的变换会沿层级组合。

对于 SVG 骨骼绑定：

• 设置一个有明确意图的根 viewBox，并记录角色的缩放比例和原点；
• 将每个旋转组围绕绘制时设定的枢轴放置；
• 避免混用设计工具中来历不明的变换和运行时变换；
• 仅在不会破坏可编辑枢轴或层级的情况下扁平化变换；
• 优化时保留裁剪路径、蒙版、渐变、ID 和引用；
• 如果多个角色实例可能共用同一文档，为 ID 设置作用域；
• 测试导出的 SVG，而不只是设计工具中的预览。

使用局部变换已知的中性根姿势。即使运行时能够推断变换原点，也要在骨骼绑定清单中以数值形式保存枢轴，因为浏览器和导出行为可能有所不同。

选择刚性、替换式或变形部件

刚性剪纸部件

适用于图形化、机械、纸偶或有限动画风格。围绕关节旋转、平移或缩放整个部件。通过重叠图稿和遮挡层保护接缝。

替换式部件

适用于离散的手形、嘴部姿势、眼形、透视转面和道具。定义互斥组和过渡规则。除非确实存在实际的中间设计，否则替换不等于补间。

变形网格或路径

适用于弯曲刚性部件会明显造成肘部、躯干、布料、尾巴或面部缺陷的情况。定义控制影响范围和限制，然后测试极端姿势。让变形保持局部；影响范围过大会造成橡皮般的体积损失。

混合式

通常较为合适：刚性前臂搭配替换式手部、变形躯干、替换式嘴部和分层头发链。根据视觉需求逐项选择，不要强迫整个角色都采用同一种技术。

构建层级和控制项

每个控制项都应包含：

• 稳定的 ID 和易读名称；
• 父级和可选的视觉部件绑定；
• 局部枢轴和静止变换；
• 允许的平移、旋转、缩放或替换值；
• 硬性／软性限制；
• 首选方向和中性值；
• 绘制顺序或可见性效果；
• 测试姿势和已知例外情况。

FK 和 IK 规划

当旋转应从父级传递到子级，并且动作轨迹由动画师控制时，使用正向运动学（FK）：脊柱、头部、尾巴、头发、松弛手势。当端点必须保持附着时，使用逆向运动学（IK）：落地的脚、放在桌上的手、抓握道具。混合式手臂／腿部骨骼绑定可以切换模式，但必须通过明确的匹配流程，避免肢体突然跳变。

IK 要求：

• 目标和弯曲／极向方向；
• 链长和可达范围限制；
• 接近完全伸展时的柔性行为；
• 拉伸策略；
• 目标不可达时的回退方案；
• FK／IK 匹配姿势和设定关键帧的切换帧。

求解器绝不能在奇异点任意选择肘部／膝盖的方向。

将姿势库作为制作词汇

创建能够体现表演意图的姿势，而不只是技术极限：

• 中性／默认姿势和呼吸待机；
• 专注、聆听；
• 积极、消极、不确定、惊讶、专注以及角色特有的情绪状态；
• 张开／闭合手部、指向、展示、持握、伸手和接触姿势；
• 需要移动时的行走／跑步／接触／通过／上行／下行关键姿势；
• 坐姿、蹲姿、转身、进入、离开和道具专用姿势；
• 每个关节和变形区域的安全／极端测试。

每条姿势记录都应包含身体控制项、面部状态、手部／道具状态、视角变体、适合保持的情况以及已批准的过渡。只有在保留角色特有表演的前提下，姿势库才能加快工作；通用表情符号姿势并不能构成表演系统。

面部绑定与对话状态

分别控制：

• 眼睛方向和聚焦；
• 上下眼睑及闭眼程度；
• 眉毛及不对称变化；
• 嘴巴开合、嘴角、宽度、圆度，以及适用时的下颌；
• 可选的脸颊、鼻子、耳朵或配件运动；
• 转头替换特征。

视素数量应与风格、语言、镜头大小和制作进度相匹配。不要规定通用的视素清单。将目标分辨率下看起来相似的音素归为一组，但保留清晰表达所需的闭合形状和独特形状。记录这套视素实际测试过哪些语言。

对话表演指导：

• 嘴型应跟随定时语音，而不是随意逐帧循环；
• 双唇音需要完全闭合时，应保留完整闭合；
• 提前或滞后只能作为有意的风格选择；
• 将眨眼、视线、眉毛、头部动作和手势作为表演来设计，而不是添加噪声；
• 避免每个音节都改变每个控制项；
• 快速剪辑间也要保持易读的面部姿势。

不要仅凭自动转录推断情绪或性格。请遵循已批准的表演指导。

动画表现，而非控制项

为每个节拍规划：

• 目标和情绪变化；
• 台词／动作时序；
• 主要姿势和剪影；
• 预备动作；
• 主要动作和接触；
• 缓和、跟随动作和保持；
• 视线和手部意图；
• 与摄影机／裁切的关系。

动画制作技巧中的制作经验法则：

• 在润饰四肢之前，先确定动作线和剪影。
• 让角色的中心／根节点根据重心和接触关系保持连贯移动。
• 让耳朵、头发、衣物或尾巴等次级链条以可控的延迟跟随主要动作。
• 有机关节通常应采用弧线，除非风格明确要求机械感。
• 善用静止。保持一个具体姿势，有时比持续的待机动作更易读。
• 仅在结构和材质允许时使用挤压／拉伸；除非风格另有要求，否则应保持预期体积。

循环与接触

对于循环，应明确定义首尾帧的兼容性、接触阶段、根节点位移，以及循环是原地进行还是带位移进行。

步行循环的质量检查：

• 接触期间，踩实的脚相对于地面保持固定；
• 根节点位移与步幅一致；
• 膝部和肘部保持预期的弯曲方向；
• 四肢长度不发生突变；
• 躯干／髋部的反向运动应体现重心；
• 首尾帧不会造成重复帧卡顿；
• 配件循环时不会突然跳动。

对于物体接触，应确定由哪个系统负责绑定。除非偏移是有意设计并有记录，否则道具不应在绑定到手部的同时又独立制作动画。

确定性时间轴交接

将动画作为明确的、可按时间寻址的状态交付。渲染器可能会反向或乱序请求帧。

推荐的镜头记录：

{
  "shot_id": "explain-step-two",
  "fps": 30,
  "start_frame": 0,
  "end_frame": 179,
  "rig_version": "presenter-rig-03",
  "view": "three-quarter-right",
  "tracks": {
    "root.position": [[0, [0, 0]], [72, [8, -3]], [179, [0, 0]]],
    "arm_right.rotation": [[42, 4], [64, 28], [110, 28], [142, 6]],
    "mouth.pose": [[51, "M"], [55, "AH"], [60, "rest"]]
  }
}

这只是示例架构，并非仓库要求。

交接规则：

• 始终一致地使用帧编号或精确的有理数时间；
• 说明使用角度还是弧度，以及坐标朝向；
• 记录每个片段的插值／缓动方式；
• 最终渲染中避免使用未设定种子的随机眨眼／待机时序；
• 明确记录可见性和替换内容的变化；
• 确保求解器对同一帧始终生成相同状态；
• 测试正向、反向、首帧、末帧和孤立帧。

画幅与裁切变体

不要将同一段表演不加调整地缩放到每种画布中。

• 重新调整根节点和摄影机／裁切，同时保护手部、视线目标、道具、字幕和地面接触点。
• 宽幅手臂姿势超出竖屏画面时，应制作替代手势。
• 使用已批准的视角变体，不要将透视转身压平或镜像处理。
• 如果服装、残障特征、文字、疤痕或道具设计不允许镜像，应保持角色左右方向的连续性。
• 在最终实际播放尺寸下检查剪影和面部清晰度。

Rig QA

在镜头制作前，使用标准测试套件检查绑定：

1. 绑定姿势与静止姿势往返测试；
2. 关节极限以及整条链的拉伸/压缩；
3. 适用时测试镜像/对称姿势；
4. 手部和足部接触；
5. FK/IK 匹配与切换；
6. 完整的面部状态和音素口型表；
7. 眨眼/视线极限；
8. 行走/待机/动作循环边界；
9. 正面、侧面及已批准的转面变体；
10. 每种交付裁切和重复的无瑕疵渲染。

对缺陷进行分类：

• **接缝/间隙：**重叠或枢轴暴露出背景。
• **跳变：**变换、替换、绘制顺序或求解器出现单帧不连续。
• **滑动：**本应固定的接触点发生漂移。
• **塌陷：**变形丢失预期的体积感或轮廓。
• **翻转：**肘部/膝部或运动路径意外改变方向。
• **漂移：**比例、面部结构或道具位置超出已批准的容差。
• **遮挡错误：**错误的图层出现在前方/后方。
• **循环卡顿：**循环边界帧重复或不匹配。

记录帧、控制值、原因、修复方法和复测结果。如果根本原因在绑定中，不要逐个镜头修补。

无障碍与安全

**已记录事实：**WCAG 2.2 SC 2.3.1 规定，除非闪烁低于一般闪烁/红色闪烁阈值，否则任意一秒内闪烁次数不得超过三次。眨眼、闭眼和普通姿势变化不会自动构成闪烁，但高对比度的全画面眼睑、背景、特效或发光变化可能构成闪烁。

还要检查重复抖动、快速缩放、旋转和大范围运动。适用时，交互式角色表面应支持减少动态效果偏好和相应控制。预录制内容可能需要单独渲染一个动态效果更平缓的版本。

SVG ID 和 ARIA 标签并不能让绑定内部的每个部件都对辅助技术具有意义。对于交互式交付，应在适当的容器级别公开角色/动作的语义信息，并在适当时隐藏纯装饰性的实现部件。对于视频，应提供字幕、文字稿，并描述必要的纯视觉动作。

权利、同意与来源记录

分别记录：

• 角色/IP 所有者及允许的用途；
• 原画师及绑定/动画创作者；
• 对表演者肖像、声音或动作参考的授权；
• 衍生素材、笔刷、字体、徽标和道具；
• 运行时/库许可证；
• 修改和审批历史。

绑定许可证不授予角色权利，角色权利也不会自动授予表演者肖像或声音权利。在交付清单中保留署名信息和限制条款。对于品牌吉祥物、授权角色、真实人物肖像、未成年人、文化敏感设计和合成复刻内容，应提交适当审批。

交付包

交付：

• 可编辑的源图及适用于运行时的资源；
• 绑定清单，包含层级结构、枢轴、限制、视角变体和控制项定义；
• 绑定/静止姿势及已批准的模型/转面参考；
• 姿势、手势、循环、面部和音素口型库；
• 动画轨道或镜头数据及时间约定；
• 运行时/版本/导出说明；
• 绑定测试渲染及 QA 报告；
• 权利/来源记录清单及所需声明；
• 已知限制、禁止姿势和修复指南。

示例 1：四足吉祥物循环动画套组

这是一个完整示例，并非强制公式。

**意图：**为浏览器营销活动制作可重复使用的扁平矢量狗狗吉祥物，包含待机、行走、坐下、警觉和摇尾巴循环动画。

**约束：**采用已批准的侧面和四分之三视图；输出为 30 fps；腿部不进行网格变形；尾巴可使用三段链；项圈徽标绝不能镜像；循环动画必须适用于 1:1 和 9:16。

**绑定方案：**根控制位于骨盆；躯干／胸部／头部采用 FK 链；近侧／远侧腿分开，使用双骨骼控制和脚部目标；尾巴分为三组；耳朵使用链式控制；替换眼睛；嘴部包含闭合／张开／喘气状态；项圈／徽标分开，并固定绘制顺序。

**动画方案：**采用四姿势行走结构，脚部目标保持落地，并匹配根节点位移；待机动画使用细微的胸部呼吸，以及错开的耳朵／尾巴跟随动作；警觉姿势先由头部和耳朵带动，再由胸部跟进；坐下是关键帧动作，而非 IK 塌陷。

**质量检查：**叠加显示脚部接触地面的帧；测试尾巴与身体的碰撞；检查近侧／远侧腿的绘制顺序；检查循环首尾状态；确认所有视图中的项圈徽标方向；将单帧倒序渲染检查。

**预期结果：**轮廓稳定，脚部不滑动，臀部／肩部没有缝隙，在移动端尺寸下状态清晰易辨，并提供注明速度范围的可重复使用循环动画。

**可能的问题：**远侧腿交叉到前方；尾巴出现接缝；根节点位移与步幅不一致；替换眼睛时出现跳变；替代视图中的徽标被镜像。

**变化方式：**若采用剪纸风格，可刻意露出关节销；只有在视觉处理方案获批后，才移除隐藏的重叠图形。

示例 2：坐姿讲解主持人

这是一个完整示例，并非强制公式。

**意图：**为一段 45 秒的技术讲解动画制作坐姿主持人，包含对白、两个指向手势、一次与平板电脑的接触，以及 16:9／9:16 输出。

**约束：**采用已批准的四分之三视图；优先表现上半身；旁白时间戳精确；计划提供六种语言本地化；双手必须与平板电脑和示意图接触；整体风格保持克制、专业。

**绑定方案：**骨盆／根控制和三个躯干控制；颈部／头部控制；眼睛注视控制；眼睑／眉毛独立控制；经过测试且适用于目标语言的视素集合；支持匹配控制的 FK／IK 手臂；替换手型；平板电脑附着目标；有限的下半身控制；前臂绘制顺序切换。

**表演方案：**先建立聆听姿势；第一次指向前先转移视线，再抬手；指尖固定在示意图上，同时让躯干稳定下来；经过清晰的过渡姿势后回到原位；在对比句上使用不对称的眉毛／视线；最后保持张开手掌的总结姿势。本地化对白沿用原有表演节拍，但重新调整嘴部和部分手势的时序，而不是不加区分地拉伸整段表演。

**质量检查：**检查手臂伸展范围和 IK 弯曲方向、手部／平板电脑附着关系、嘴部闭合和嘴角、双眼视线汇聚、眉毛穿插、绘制顺序切换、字幕留白、竖屏手势替换，以及逐帧重复渲染的准确性。

**预期结果：**角色看起来是在思考和讲解，而非机械地循环播放控制动作；接触稳定；本地化团队可以调整语音时序，而无需重建绑定。

**可能的问题：**手臂接近伸直时肘部翻转；手在平板电脑上滑动；每个音节都触发头部动作；视素不适用于目标语言；竖屏裁切掉指向的手。

**变化方式：**如果确定性和精确度比可重复使用的形变更重要，可将两个重点手势替换为经批准的姿势到姿势手臂绘图，同时保留面部绑定。

来源

已核查的官方和权威来源（2026-07-12）：

• W3C SVG 2，坐标系统、变换和 viewBox：https://www.w3.org/TR/SVG2/coords.html
• MDN SVG 教程和 transform 参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial and https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform
• MDN viewBox：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox
• W3C WCAG 2.2，三次闪烁或低于阈值：https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
• W3C WCAG 2.2，交互产生的动画：https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html
• Adobe，动画原则概述：https://www.adobe.com/creativecloud/animation/discover/principles-of-animation.html
• ScreenSkills，动画制作岗位和技能：https://www.screenskills.com/job-profiles/browse/animation/