Vectania Editor(二)|让图形开始运动:从属性动画到状态切换

Vectania Editor|AI 生成内容产品体验|字数 2,992|阅读时长 ≈ 8 分钟

第一篇结束时,我已经有了一张可以继续编辑的脸:图层清楚,路径能修,画布与属性面板彼此对应。

只是它还停在某一刻。眼睛不会闭合,嘴角不会变化;我发出指令,它只会用同一张表情看着我。

我原以为下一步很简单:给属性加几个关键帧,再按下播放。

打开 Timeline 后,问题却接连出现:位置从哪里移到哪里?路径怎样经过中间形状?眼前的图层属于整份工程,还是当前动画?当“困倦”“惊讶”和“主题-蓝色”都成为独立动画,它们又怎样组成同一个角色?

动画不是给静态编辑器添一根播放条。它需要一套结构,讲清谁在变化、变化如何发生,以及下一段变化由什么决定。

这是系列的第二篇。我们从属性轨道出发,经过关键帧、缓动和 Clip,再进入 State Graph 与 Transition,看看静态图形怎样获得一段可编辑、可检查、可组织的时间。

属性动画工作区
属性动画工作区

图 1:进入 Anim 工作区后,画布展示结果,Timeline 解释结果怎样随时间变化。

当记忆开始兼职导航

这次的测试工程已经进入数百图层、数十个 Clip、上千关键帧的量级;一个 State Machine 又把这些 Clip 分到 Action、Theme 和 Common Action 三个 Layer。

这些数字不是成绩单,而是一次压力测试。动画只有两个圆、三个关键帧时,我可以凭记忆工作。角色同时拥有动作、情绪、生活场景和主题变化后,记忆便不再可靠。

这时,界面必须替我回答三个问题:谁在变化?发生在哪段时间?它与其他变化有什么关系?

Timeline 先回答:谁在什么时候变了?

我选中 变形-芒果-睡眼张望。这段表情由路径、显隐和样式共同完成。在 Dope Sheet 里展开 smile mouth,Position X、Position Y、Path、Scale X、Scale Y 和 Opacity 依次出现;右侧的菱形标出属性在哪一帧留下了值。

Timeline 的 Dope Sheet
Timeline 的 Dope Sheet

图 2:一个对象展开为多条属性轨道;密集的 Path 关键帧与只记录起止值的属性可以并排检查。

让我安心的不是关键帧数量,而是上下文没有中断。smile mouth 在图层树和 Timeline 里仍是同一个对象;Position 与 Path 只是它进入时间后的不同侧面。

Timeline 因此不只是收纳菱形的抽屉。它把“对象—属性—帧”连成一条能原路返回的路径。

关键帧定点,曲线安排过程

Dope Sheet 能回答“哪里有关键帧”,却不总能解释两个点之间发生了什么。

我把右眼高光的 Opacity 切到 Value Graph。六个关键帧连成一条数值曲线:透明度从 0 升到 1,停留一段时间,再回到 0。菱形只说“这里发生了变化”,曲线则讲清高光何时出现、停多久、何时退场。

透明度 Value Graph
透明度 Value Graph

图 3:Value Graph 把时间上的点连接成随时间变化的值。

选中 Path 的一个 Transition Segment 后,Graph Editor 又换了问题。它不重复绘制路径,而是展示这段插值的 Duration、Easing 和控制值。

关键帧之间的缓动编辑
关键帧之间的缓动编辑

图 4:Duration 决定 Path 变化走多少帧,Smooth 决定它怎样经过中间过程。

两者分工明确:

  • 关键帧规定某一刻必须是什么值。
  • 缓动决定从一个值走向下一个值时,时间如何分配。

关键帧负责定点,缓动安排赶路:匀速前进、慢慢起步,或临近终点才减速。Graph 模式会跟随选择变化——数值属性显示 Value Graph,过渡片段显示缓动曲线;Path 在这里检查的是“怎么变”,不是再画一遍几何形状。

Dope Sheet 整理事件,Graph 检查过程。它们共享选择与播放上下文,像 Timeline 为不同任务切换镜头。

图层一多,视野也要会缩放

数十个 Clip 共享同一个 Artboard,但每个 Clip 使用的图层不同。始终展开数百个全局图层,当前动画会被淹没;只看当前 Clip,又容易忘记它仍建立在同一份文档上。

图层区因此提供三种作用域。它们不是三棵树,而是同一张地图的三个缩放档位。

第一种是 Clip Ghost Groups。它按 Clip 分组展示参与动画的图层。“Ghost” 不复制图层,只让同一个文档对象以 Clip 成员的身份出现。我可以先找到 变形-芒果-睡眼张望,再展开它实际使用的对象;画布命中与选择也会收进这个范围。

Clip Ghost 图层模式
Clip Ghost 图层模式

图 5:Clip Ghost Groups 把全局图层整理成按 Clip 命名的动画上下文。

第二种是 All Layers with Active Clip Usage。它恢复全局图层树,同时标出当前 Clip 的使用关系。未参与当前动画的对象仍在树中,但会被弱化;画布继续按当前 Clip 隔离。

All Layers 图层模式
All Layers 图层模式

图 6:All Layers 保留全局结构与当前 Clip 的使用关系。

第三种是 Global Layers。它撤掉 Clip 隔离,直接展示 Artboard 的原始层级。不同动作准备的图形会同时出现,画布像所有演员一起挤上舞台;检查全局结构时,这正是我需要的事实。

Global Layers 图层模式
Global Layers 图层模式

图 7:Global Layers 回到文档原始结构,适合检查全局组织。

三种模式各自回答一个问题:

  • Clip Ghost:这个 Clip 使用了什么?
  • All Layers:这些对象在整份文档里是什么关系?
  • Global Layers:这份文档到底拥有什么?

搜索只在我知道名字时有效;作用域先替我划出任务边界。切换作用域也不会制造第二份图层数据,只会让同一份结构按不同问题显露不同部分。

Clip 管一段动作,State Graph 决定下一步

Timeline 变得顺手后,我一度以为动画已经做完:选中 Clip,按下 Play,芒果会眨眼,机器人会变色。

但虚拟人不能永远等我替它挑下一段 Clip。它需要在等待、惊讶、困倦和主题之间做出选择。于是我转到 State Graph。

Action Layer 有 25 个状态,以及大量从 Any State 发出的 Transition。第一眼看去,它像一张拥挤的地铁图,却揭示了 Timeline 无法表达的问题:这些 Clip 不是孤立片段,而是同一个行为系统里的候选状态。

Action State Graph
Action State Graph

图 8:Action Layer 把多段动作组织成状态;列表与关系图描述同一组行为。

切到更小的 Theme Layer,关系立刻清楚。白色、蓝色和粉色三个状态分别接收来自 Any State 的 Transition;主题参数满足条件时,角色进入对应状态。

Theme State Graph
Theme State Graph

图 9:较小的 Theme Layer 让入口、目标与 Transition 方向更容易辨认。

这个工程把 Action 设为 motion layer,把 Theme 与 Common Action 设为 control layer。它们不是三个角色,而是同一角色的不同职责:动作层提供主要姿态,控制层修改主题色或局部属性,最后合成结果。

Timeline 管 Clip 内的连续变化,State Graph 管 Clip 之间的离散选择。我既能修正眨眼的第 24 帧,也能解释角色为什么从等待切到眨眼。

播放时,运行结果只会临时覆盖原稿,不会逐帧改写原始图层。预览仍是预览,不会悄悄变成一次编辑。

Transition 不是一条瞬移线

从 Any State 指向 主题-白色 的 Transition 起初只是一条线。它说明“去哪里”,却没有解释“怎样去”。

Any State 是通配入口,不是一张具体的起始画面。进入 Transition 视图后,我先用 Sample From 和 From Frame 选择真实状态与起始帧。随后,这条线展开为一段 8 帧预览:左侧列出匹配到的 faceeye lefteye right,右侧把属性铺在过渡时间轴上。

Transition 起始帧
Transition 起始帧

图 10:第 0 帧列出来源、时长、效果,以及实际匹配到的图层与属性。

把播放头推到第 4 帧,进度来到 50%。我看到的不是另存的一段“过渡动画”,而是同一条 Transition 在中点的求值结果:哪些图层匹配成功,哪些属性正在参与,控制层最终投影到哪里,都能暂停检查。

Transition 中间帧
Transition 中间帧

图 11:同一条 8 帧 Transition 的第 4 帧;播放头与 Progress 标出过渡中点。

这比反复播放、再猜问题来自源 Clip、目标 Clip 还是过渡规则可靠得多。

方向、条件、Duration、插值与 Effect 共同决定 Transition 怎样切换;预览则把匹配结果与当前进度摆到眼前。连线能被展开、暂停和定位后,才成为可调试的行为。

参数把状态图接回现实

最后,我回到 State Machine Debug 面板。状态切换主题切换 不再是图上的抽象条件,而是可直接输入的参数;Apply、Interrupt 和推进 1 帧则让我验证一条指令如何被状态机处理。

State Machine 参数与运行控制
State Machine 参数与运行控制

图 12:参数提供可复现的输入,Resolved Runtime 交代当前落在哪些状态与控制层上。

它还不是观众使用的遥控器,却完成了设计阶段的闭环:输入参数,确认状态选择,检查 Transition,再回 Timeline 修正属性轨道。状态图终于从关系说明变成了可以验证的行为。

图形有了时间,还没有身体

到这里,静态图形终于有了时间。Timeline 解释动作如何发生,图层作用域划清任务边界,State Graph 与 Transition 把分散的 Clip 组织成可追踪的行为。

但变化仍主要落在独立矢量对象上。眼睛移动,因为它自己的属性轨道改变;嘴形变化,因为 Path 关键帧记录了另一种几何形状。角色结构更复杂后,逐图层写关键帧会越来越难维护。

第三篇将进入模型:怎样把散开的图层组织成参数驱动的身体,以及怎样让角色不只播放动作,还能作为一个整体回应。


本文记录的是当前阶段的个人自用工作流,文中的数量只用于说明工程复杂度,不代表性能结论。截图来自用户指定的本地测试工程;截图过程在隔离浏览器会话中完成,源工程未被修改。

0