如果你之前用过 Synfig或者一直在关注开源 2D 动画工具的进展那么对 Friction 这个名字应该不会太陌生。Friction 脱胎于经典的矢量动画工具 Synfig 项目目标是重新梳理代码结构、提升交互流畅度同时保留矢量补间、骨骼动画等老牌能力。最近它在图层组织和角色动画两个方向上都加入了值得关注的变化一个是骨骼系统另一个是自由层级拖动。本文会围绕这两个功能展开从基础概念讲到具体的搭建流程再结合一个简单的手臂摆动动画案例把骨骼绑定、层级调整和关键帧动画串起来演示一遍。如果你正在学习 2D 动画制作或者打算在角色动画工作流中使用 Friction这篇文章可以作为一份起步参考。1. Friction 新增骨骼系统与自由层级拖动背景与核心概念1.1 Friction 是什么为什么值得关注Friction 是一款基于图层结构的 2D 动画制作软件属于开源社区里比较典型的“节点/图层树 时间轴关键帧”工作流。它和主流的逐帧绘制工具不太一样核心优势在于“矢量图形 补间动画”画面由可编辑的矢量图层构成不改分辨率也能自由缩放。动画依靠关键帧和中间的插值自动生成不需要一帧一帧手工画。图层树结构清晰每个图层可以有自己的父子关系、混合方式和变换属性。对于需要制作角色动画、MG 动画、循环动画的创作者来说Friction 最吸引人的地方是它保留了 Synfig 时代的骨骼概念又通过代码重构让软件在交互上更符合现代使用习惯。你可以把它理解成“一个更现代、更好上手的 Synfig 分支”。1.2 骨骼系统解决的核心问题在手绘动画中想让一个角色的手臂自然摆动最常见的方式是一帧一帧画。这样做效果精细但效率很低而且一旦调整角色比例相关帧都要重画。如果是纯图层动画也可以手动给手臂图层打关键帧但问题在于做关节弯曲时单靠平移和旋转很难让上下两段肢体自然地“连在一起”。骨骼系统的做法相当于给角色搭了一套“看不见的内部骨架”把画面中的图形图层绑定到骨骼上。移动骨骼时对应图形会跟随移动。旋转骨骼时图形会围绕骨骼关节旋转。多个骨骼可以共同影响一个区域从而实现平滑的关节弯曲。这样一来你只需要调整骨骼的姿态图形就会跟着变化。动画师的工作对象从“每个图层”变成了“每个骨骼”效率和可控性都会明显提升。1.3 自由层级拖动是什么和传统图层管理有什么不同在 Friction 这样的软件里图层面板不只是显示顺序它同时决定了渲染顺序上面的图层会覆盖下面的图层。父子关系子图层会跟随父图层运动。控制范围骨骼、滤镜、变换效果通常作用于整个子树。传统做法里如果你要调整一个图层的层级位置往往需要通过右键菜单、快捷键或者“发送到最上层/最底层”之类的方式完成。步骤多而且跨组移动更麻烦。Friction 新增的自由层级拖动则直接改变了这个交互在图层窗口中按住图层拖拽到目标位置就能改变堆叠顺序。把图层拖到另一个图层之下能快速建立父子关系。支持跨容器拖拽可以从一个组内拖到另一个组内。多选图层后也能批量拖动方便重构图层树。这个能力最直接的价值是做角色动画之前你可以先快速用图形把角色画出来然后通过自由层级拖动把它们整理成清晰的层级结构再进入骨骼绑定环节。它降低了“整理图层”这个前期步骤的成本也让后期调整层级不再那么痛苦。2. 环境准备安装与版本说明2.1 支持的平台与获取方式Friction 是跨平台软件常见安装环境包括WindowsmacOSLinux获取方式有两种一种是从项目官网或 GitHub Releases 页面下载最新稳定版安装包另一种是在 Linux 下通过包管理器安装社区构建版本。这里有一个通用建议正式做项目时优先选择当前最新稳定版不要使用 nightly 或带 alpha 标记的测试版避免骨骼系统、层级拖拽这类新功能在高频操作中遇到不稳定问题。2.2 版本差异提醒由于不同系统、不同发版周期下的界面细节可能略有差异本文演示时以常见默认界面为参考。你在实际操作时如果发现菜单名称、图标位置不完全一样不要紧张这说明你用的版本界面有过调整。只要核心概念一致操作思路完全可以复用。我的建议是先安装软件并开启默认配置然后对照下面的顺序完成准备启动 Friction确认画布区域正常显示。打开图层窗口通常位于右侧或左侧面板。打开时间轴面板通常位于画布下方。确认工具面板中有“选择工具”“骨骼工具”“钢笔工具”等基础工具。2.3 示例项目结构规划为了不让后面绑定骨骼时手忙脚乱我们先规划好示例项目的结构。本文后面的实战环节会制作一个简单的手臂动画图层树的预期结构如下Arm_Scene └── arm_root 图层分组整个手臂的根节点 ├── upper_arm 上臂图形 ├── forearm 前臂图形 └── hand 手掌图形 └── Skeleton01 骨架层包含 Bone01、Bone02这个规划看起来简单但在 Friction 中做起来非常顺手尤其是当你先画出图形再通过自由层级拖动把它们归入arm_root分组时那种“先自由创作、再整理结构”的体验比旧版图层管理舒服很多。3. 骨骼系统核心原理与基础操作3.1 骨骼系统的组成与对应关系在进入操作之前先搞清楚骨骼系统的三个核心概念。第一层骨架层Skeleton Layer这是一个容器图层内部包含多根骨骼。每个角色组件可以单独建一个骨架层也可以多个组件共用同一个骨架层。通常建议“一个运动单元一个骨架层”。第二层骨骼Bone每根骨骼本身并不是可见图形而是一个带有原点、角度和长度的矢量对象。它定义了一个“局部坐标系”。图形跟随骨骼运动本质上就是跟随这个局部坐标系的变化。第三层绑定与权重Binding and Weights绑定就是把某个图层“挂”到某根骨骼下面。绑定之后骨骼运动时图层会跟着动。权重则用来控制“跟多少”。权重越高影响越大当两根骨骼对同一个图层都有权重时图层会表现出柔性的过渡这是做关节弯曲的关键。把这三层关系放在一起就得到了一个很清晰的逻辑骨架层Skeleton Layer └── 骨骼节点Bone └── 绑定图层Binding Layer └── 权重Weight3.2 创建第一根骨骼步骤详解Friction 中新建骨骼的常见流程如下在图层窗口中确认选中当前场景的根节点。右键选择“新建图层”在子菜单中找到骨架层Skeleton Layer。新建成功后图层面板中会出现一个Skeleton图层。切换到“骨骼工具”在画布上按住左键拖动拉出一根骨骼。检查骨骼骨骼通常显示为一条带方向的线起点是父关节末端是子关节。操作完成后图层面板中的骨架层下应该能看到对应骨骼节点。如果你看不到骨骼可以检查是否选中了骨架层或者骨骼工具是否处于激活状态。创建第二根子骨骼时继续使用骨骼工具从第一根骨骼的末端开始再次拖动软件会自动把第二根骨骼设为第一根骨骼的子级。通过这种方式可以快速创建“上臂 → 前臂 → 手掌”这种关节链条。3.3 绑定图层让图形跟随骨骼运动骨骼创建完成不代表图形会自动跟它走你还需要做绑定。绑定操作的核心是让“图形图层”和“骨骼节点”建立关联。在 Friction 中常用的绑定方式有两种方式一基于父子关系绑定把图形图层拖放到骨骼节点下方使它成为骨骼的子图层。这种方式最直观适合绑定比较独立的组件例如头部、手掌等。方式二基于权重绑定在图层的绑定参数中指定受哪些骨骼影响以及每个骨骼的影响权重。这种方式适合需要平滑变形的区域例如肘部、膝盖、肩部。为了演示清楚下面是一个绑定动作的最小示例1. 选中 upper_arm 图层。 2. 打开该图层的绑定属性面板。 3. 点击“添加骨骼关联”选择 Bone01。 4. 设置权重为 1.0表示完全受 Bone01 影响。 5. 拖动 Bone01验证 upper_arm 是否跟随。你可能会问为什么不让骨骼直接作为图层父级因为直接做父子关系只能实现“完全跟随”无法实现“部分跟随”和“平滑过渡”。而权重绑定可以做到一根骨骼移动时相邻区域的图形按比例受到多根骨骼影响关节处会像真实皮肤一样有过渡形变。3.4 骨骼的父子层级与姿态调整与图层的父子关系类似骨骼本身也可以形成父子链条。父骨骼旋转时子骨骼会继承父骨骼的运动从而形成类似身体骨架的联动效果。举个例子做一个手臂链条骨骼1肩关节 → 肘关节骨骼2肘关节 → 腕关节骨骼3腕关节 → 指尖当骨骼1旋转时整条手臂跟着动当骨骼2旋转时前臂和手掌发生弯曲当骨骼3旋转时只有手掌发生转动。这种“局部改动自动带动子级”的能力就是骨骼动画的核心优势。在 Friction 中调整姿态时建议遵循一个原则先调整父级骨骼再调整子级骨骼。如果先旋转了手掌再旋转上臂往往需要在后期重新调整局部姿态反而增加工作量。4. 自由层级拖动新功能详解4.1 为什么“自由层级拖动”如此重要图层动画软件中最容易陷入的问题就是图层结构越来越乱。新手做角色动画时常常一开始就创建很多图层既不分组也不命名等做到一半想加骨骼或调整动画时才发现图层堆叠关系完全失控。在 Friction 中引入自由层级拖动之后整理图层变成了一件非常“顺手”的事情不需要打开菜单一层层找命令。直接在图层窗口中拖拽即可。拖动时有明确的视觉反馈可以看到目标插入位置。支持把图层从某个分组中拖出来再放入另一个分组。这看起来只是一个交互优化但实际体验提升非常大。尤其在做角色动画时前期可以把所有零件平铺绘制然后再通过拖拽组装成完整的层级结构。4.2 基础拖拽操作与视觉反馈自由层级拖动的核心操作非常简单但有几个关键细节值得留意。调整堆叠顺序选中图层后按住左键并上下拖动当目标位置出现高亮横线时松开鼠标图层就会被移动到新位置。这个操作直接改变渲染顺序也就是谁在上谁在下。建立父子关系当你把图层拖到某个目标图层上并出现缩进高亮时松开鼠标被拖动的图层会成为目标图层的子图层。从此以后父图层的移动、旋转、缩放都会影响子图层。从子级变回平级如果要把一个子图层拖出来变成父图层的兄弟只需要把它拖到父图层之后的位置并且不要出现缩进提示松开鼠标即可。下面用一个简单的示例说明图层的结构变化拖拽前 arm_root ├── upper_arm └── forearm 把 forearm 拖到 arm_root 外面 arm_root └── upper_arm forearm这种操作对后面的骨骼绑定非常友好。你可以先画好图形再根据“哪个部位应该跟哪个骨骼走”来重新组织父子关系不必一上来就严格规划。4.3 跨容器拖动与批量调整实际项目中图层数量可能很多一个角色经常包含几十个图层。这种情况下单独拖动一个图层不够高效Friction 的自由层级拖动还支持两种更高效的模式。跨容器拖动允许直接把一个图层从一个分组拖到另一个分组。比如角色身体下有一堆配件你想把其中一个配件移到另一个分组直接拖拽即可不需要先剪切再粘贴。多选批量拖动按住 Shift 或 Ctrl 键可以同时选中多个图层然后整体拖到新位置。这对“把多个零件同时归入同一个分组”非常有用。批量操作时的建议顺序先用命名规则过滤出同类图层。批量选中它们。一次性拖放到目标分组。拖放完成后检查整体渲染顺序是否符合预期。4.4 与骨骼系统配合使用的场景自由层级拖动不只是整理图层那么简单它和骨骼系统结合后能显著提高角色动画的制作效率。典型场景你想创建一个带手臂、腿、头部、身体的角色但在绘制阶段所有图形都是独立平铺在画布上的。传统做法是创建图层时就要规划好分组否则后续绑定会很痛苦。现在可以这样做先平铺绘制所有身体部位。使用自由层级拖动把头部、身体、手臂、腿部各自归组。为每个部位创建骨骼层。最后把每个部位的分组绑定到对应骨骼。这样流程更符合创作习惯先自由画再结构化最后做控制。5. 实战用骨骼系统制作手臂摆动动画为了让前面的概念落地这一章做一个完整的“手臂摆动”骨骼动画案例。整个流程尽量简化但会保留真实的操作步骤和关键属性设置方便你在 Friction 中跟着做。5.1 目标与前置准备本次实战要实现的效果上臂保持相对固定或轻微摆动。前臂在肘关节处弯曲。手掌跟随前臂运动。骨骼带动图形自然变化。前置准备已安装最新版本 Friction。新建一个场景帧率设置为 24fps也可以是 30fps取决于你的项目需求。准备好工具栏中的矩形、圆形、选择、骨骼等工具。5.2 创建手臂图形组件在 Friction 的画布中先用基础图形画三个部分上臂一个矩形代表从肩膀到肘部的部分。前臂一个矩形代表从肘部到手腕的部分。手掌一个圆形或矩形代表手部。为了让后面动画更自然把三段图形摆放成一个伸直的手臂形态并让它们的连接处稍微重合。这一步很关键因为骨骼带动关节弯曲时两段图形之间需要一定的重叠区域才能平滑过渡避免出现“断开”的观感。图形创建完成后在图层面板中给它们重命名upper_arm forearm hand然后使用自由层级拖动把这三个图层全部拖入同一个分组arm_root中形成如下结构arm_root ├── upper_arm ├── forearm └── hand结构整理好后保存一次项目文件避免后续误操作丢失数据。5.3 创建并摆放骨骼接下来创建骨骼系统。在图层窗口中选中场景根节点。新建一个骨架层命名为Skeleton01。切换到骨骼工具。在画布上从“肩部”位置开始拖动拉出第一根骨骼 Bone01末端放到“肘部”位置。从 Bone01 末端继续拖动创建第二根骨骼 Bone02末端放到“手腕”位置。此时骨骼结构应该类似于Skeleton01 ├── Bone01 └── Bone02如果骨骼的位置和图形没有对齐可以在图层面板中选中骨骼再使用选择工具调整骨骼的位置和旋转直到骨骼走向与手臂图形基本吻合。注意调整骨骼时重点关注起点和终点的关节位置而不是骨骼中间位置。5.4 将图形绑定到骨骼绑定是整个流程中比较重要的一步直接决定了动画结果是否正确。操作思路如下将upper_arm绑定到Bone01权重设置为 1.0。将forearm绑定到Bone02权重设置为 1.0。将hand绑定到Bone02权重设置为 1.0。如果你希望肘部弯曲更平滑可以给forearm叠加一个 Bone01 的弱权重比如 0.2 或 0.3。但这种弱权重设置对新手来说容易产生意外变形初学阶段建议先用完全绑定做通一个案例后再尝试权重过渡。绑定检查方法选中 Bone02 并旋转观察forearm和hand是否一起围绕肘关节转动。如果只有forearm动而hand不动说明hand的绑定遗漏或绑定目标错误。5.5 制作关键帧动画绑定完成后开始打关键帧做动画。时间轴的操作逻辑和其他动画软件类似在第 0 帧处记录骨骼初始姿态。在第 24 帧处旋转 Bone02让前臂弯曲约 90 度手掌也随之摆动。在第 48 帧处把 Bone02 旋转回初始角度形成一个往复摆动。具体操作时在第 0 帧选中骨骼点击时间轴上的“关键帧”按钮让骨骼当前属性记录为关键帧随后跳转到第 24 帧调整 Bone02 的旋转属性再记录第二帧最后跳转到第 48 帧恢复初始旋转角度并再次记录。完成后播放动画应该会看到手臂从伸直状态弯曲再回到伸直状态的循环效果。如果动画速度太快或太慢可以通过调整关键帧之间的帧数来控制。5.6 导出预览与常见结果说明动画预览满意后可以导出视频或序列帧。Friction 的导出流程通常如下打开“渲染”或“导出”面板。选择输出范围一般选择“整个时间轴”。设置输出格式如果只是预览选择常见视频格式如果需要后期合成建议选择 PNG 序列并保留透明通道。设置分辨率与帧率点击导出。导出后的预期效果前 24 帧手臂从伸直弯曲到接近 90 度。第 24 到 48 帧手臂从弯曲状态恢复伸直。整个动画中图形不会出现明显断裂或跳跃。如果你在导出后发现图形断裂大概率是图形之间的重叠区域不足或者权重分配过于极端。回到第 5.2 步和 5.4 步调整重叠区域和权重即可。6. 常见问题与排查思路骨骼系统和自由层级拖动都比较新操作过程中难免遇到一些奇怪现象。这里整理了一份常见问题排查表并按“现象、原因、思路、避免方法”拆开说明。问题现象常见原因解决思路骨骼拖动时图层不动图形图层没有绑定到骨骼检查图层绑定属性重新建立骨骼关联图层跟随骨骼但动作异常跳跃关键帧没有记录完整骨骼状态重新在首尾关键帧记录所有相关属性拖拽图层后渲染顺序发生变化图层层级变化导致 Z-order 变化拖拽后立即检查图层面板中的顺序关节处图形断裂图形重叠不足或权重分配不合适增加关节处图形重叠区域调整权重导出视频黑屏或透明输出格式不支持透明背景使用 PNG 序列导出或调整视频编码设置骨骼层级太深导致局部控制困难骨骼父子链条设计不合理尽量保持 2 到 3 层级别的骨骼树6.1 骨骼拖动时图层不动这个现象最常出现在刚完成骨骼创建之后。原因是骨骼和图形之间还没有建立绑定关系或者绑定关系被误删。排查步骤选中图形图层打开绑定属性面板确认骨骼是否出现在关联列表中。如果关联列表为空重新添加骨骼关联。确认权重不为 0权重为 0 时骨骼不会对图形产生任何影响。确认图形层级不在骨架层上方且未锁定。6.2 图层跟随骨骼但动作异常跳跃如果你第一次旋转骨骼时图形飞到了很远的地方很可能是骨骼原点与图形中心点不重合或者关键帧之间存在未被记录的属性变化。建议这样处理先回到第 0 帧把图形和骨骼对齐到初始姿态。记录完整关键帧不要只记录旋转属性必要时把位置、缩放一起记录。后续每个关键帧都在骨骼原始父级坐标系下调整避免局部坐标和世界坐标混用。6.3 拖拽图层后渲染顺序发生变化自由层级拖动的本质是改变图层树的父子关系和排序因此排序变化会直接影响渲染顺序。比如原本应该被遮挡的背景图层拖到上层后就会遮挡角色。避免方法在拖拽之前留意目标位置的高亮指示。如果只是想做父子关系而不想改变遮挡顺序尽量把图层拖到目标层之下位置并保留横向缩进即可。6.4 关节处图形断裂断裂问题通常和两个因素有关图形本身没有重叠区关节弯曲后两段图形之间会露出空隙。权重分配不合理图形完全被一根骨骼控制弯曲时边缘产生硬切。解决思路也比较直观把上臂末端和前臂起始处做成有一定重合的图形区域然后在关节弯曲时让重合区域同时接收两根骨骼的权重。对于新手可以先加重叠区不调权重熟悉之后再尝试 0.5/0.5 的柔化权重。7. 最佳实践与工程建议7.1 建模阶段就规划骨骼拓扑很多新手在画角色时习惯随手画等到角色完成后再想骨骼应该怎么加结果发现很多图形相互穿插没法很好地绑定。更稳妥的做法是画角色之前先在纸上或脑内规划出骨架拓扑。例如一个人形角色至少有这些骨骼链条骨架根 ├── 脊柱链 ├── 左臂链肩 → 肘 → 腕 ├── 右臂链肩 → 肘 → 腕 ├── 左腿链髋 → 膝 → 踝 └── 右腿链髋 → 膝 → 踝规划时明确哪些部位会大幅弯曲哪些部位只是跟随移动。大幅弯曲的部位比如肘部、膝盖图形一定要预留重叠区只是跟随移动的部位可以直接做父子绑定。7.2 命名规范无论是一个人做项目还是团队协作命名规范都很重要。Friction 的图层树一旦复杂起来如果名字都是Layer 001、Layer 002查找和绑定都会非常痛苦。建议采用“部位 左右 功能”的命名方式arm_L_upper 左臂上段 arm_L_forearm 左臂前段 arm_L_hand 左手 leg_R_thigh 右大腿 leg_R_calf 右小腿骨骼命名尽量和图层命名对齐比如Bone_arm_L、Bone_leg_R这样在绑定权重时快速对应排查问题也更快。7.3 图层与骨骼的编号顺序创建图层和骨骼时不要杂乱无章地新建。建议按“从内到外、从父到子”的顺序创建先创建基础身体图层。再创建身体各部位分组。然后创建骨架层。最后创建骨骼并绑定。这样的顺序能减少来回拖拽层级的工作量也更容易保证图层树结构清晰。7.4 关键帧策略先姿势后补间使用骨骼系统做动画关键在于打关键帧的节奏。建议采用“先姿势后补间”的方法先在第 0 帧设置好起始姿势。跳到需要转折的关键帧调整骨骼形成关键姿态。再跳到下一个关键帧调整下一个姿态。最后回到时间轴检查自动生成的补间是否满足要求。不要一开始就逐帧调骨骼那样既慢又容易失控。骨骼动画的优势之一就是可以通过少量关键帧自动生成中间过渡充分利用这个优势才能真正提高效率。7.5 重用与备份如果你做了很多角色或组件可以考虑把常用的骨架和图层结构保存为模板。下次做新角色时直接导入模板再修改图形形状、重新绑定图层即可。同时骨骼绑定和层级调整都属于结构性操作Friction 项目文件应定期备份。建议在以下时间点保存备用版本完成角色图形绘制后。完成骨骼创建后。完成第一遍绑定后。完成第一版动画后。备份的目的是当后续修改导致文件不可恢复时能够回到关键节点重新来过。8. 总结与延伸学习方向这篇文章围绕 Friction 的两个新增能力做了展开骨骼系统让角色动画从“手动调整每个图层”升级为“控制骨骼驱动图形”自由层级拖动则让图层树整理变得更直观、更高效。二者结合后制作 2D 角色动画的流程可以简化成“先画图 → 再整理层级 → 建骨骼 → 绑定权重 → 打关键帧”中间操作成本明显降低。对于第一次接触 Friction 的读者我建议你先不要急着做完整角色。可以先创建几个简单矩形按本文的流程练习建骨骼、绑图层、旋转骨骼、观察图形变化再用自由层级拖动调整图层父子关系。等基础操作熟练后再尝试做完整的角色骨骼系统这时候你会发现很多问题已经在前期练习中提前踩过一遍了。如果你想继续深入学习可以按下面几个方向推进学习权重绘制与柔化边界理解多骨骼同时影响一个图层的原理。练习反向运动学IK让手脚的摆放更符合真实关节运动。研究时间轴曲线编辑器掌握缓动节奏的控制方法。尝试把骨骼动画与 Friction 的粒子、滤镜等功能结合制作更复杂的 MG 动画。在真正开始绑定角色之前先用两组小方块演练骨骼的父子关系和层级拖拽这会比直接做完整角色少踩很多坑。希望这篇教程对你上手 Friction 的新功能有所帮助。