# 曲线图

曲线图视图可显示和编辑动画的[关键帧](/spine-keys)的时间点和值。关键帧值绘制在Y轴上，时间绘制在X轴上。由此产生的“曲线”是一条显示了该值如何随时间变化的线。

相比之下，[摄影表](/spine-dopesheet)只显示关键帧的时间点，而不显示它们的值，但它可以同时显示许多不同属性的关键帧。曲线图如果同时显示许多设置了关键帧的属性，就会很拥挤。

![](/img/spine-user-guide/graph/view.png)

关于有效使用曲线图的各种方法，请参见曲线图[提示](/spine-tips#曲线图)。

# 行

<callout>可以使用`隐藏行`[视图设置](/spine-graph#隐藏行)或`隐藏曲线图行`[热键](/spine-settings#热键)来隐藏曲线图行。</callout>

在左侧的[时间轴](/spine-keys#时间轴)下方，将显示每个已设置关键帧的属性的行，并按骨骼分组。每行都有一个可见点，用于设置在曲线图中显示哪些属性曲线。在可见点上单击鼠标右键或按住Ctrl键可同时设置多个可见点。

![](/img/spine-user-guide/graph/rows.png)

在曲线图行上滚动鼠标滚轮可上下滚动它们。与视口类似，使用鼠标右键拖动可上下移动曲线图行。

## 概览行

曲线图中的第一行是“概览行”，显示动画名称。为概览行设置可见点将为曲线图中当前显示的所有行设置可见点。当显示多条曲线时，曲线图会很拥挤，使用[摄影表](/spine-dopesheet)会更容易些。

<callout>在需要选择另一个动画时，单击动画名称会很有用，但是[动画视图](/spine-animations-view)速度更快。</callout>

当项目有多个骨架时，每个骨架的行上方将显示一个概览行。在层级树中隐藏骨架也会在曲线图中隐藏它。

单击动画名称可在层级树中选择该动画。

## 骨骼行

![](/img/spine-user-guide/graph/rows-bone.png)

关键帧按与关键帧属性最相关的骨骼分组。为骨骼行设置可见点将为其下的所有属性行设置可见点。

<callout>单击骨骼名称在曲线图处于[锁定](#锁定)状态时更有用，因为选中骨骼时曲线图行不会更改。</callout>

单击骨骼名称可在视口中选择该骨骼。按住`ctrl`(Mac上为`cmd`)可切换选择或选择多个骨骼。

可以上下拖动骨骼行，以更改它们在曲线图中的[顺序](#顺序)。

## 属性行

![](/img/spine-user-guide/graph/rows-property.png)

骨骼行下面是每个关键帧属性的属性行。设置属性行的可见点可使该属性的曲线显示在曲线图中。一个属性可以有多条曲线。

<callout>单击[骨骼变换](/spine-tools#骨骼变换)属性的名称还将选择相应的[变换工具](/spine-tools#骨骼变换)，以加快设置新关键帧的速度。</callout>

单击属性名称可在视口或层级树中选择该项目。按住`ctrl`(Mac上为`cmd`)可切换选择或选择多个项目。

## 其他行

[绘制顺序](/spine-keys#绘制顺序)和[事件](/spine-keys#事件)的行与骨骼没有关联，因此当它们有关键帧时，它们会显示在曲线图的底部。可以使用[曲线图筛选器](#Filters)隐藏这些行。

# 内容

曲线图有两种模式来控制显示哪些骨骼行：解锁和锁定。

## 解锁

![](/img/spine-user-guide/graph/unlocked.png)

<callout>若要查看所有骨骼行，请按`空格键`、`escape键`或双击视口中的任意位置来[取消选择](/spine-tools#取消选择)。</callout>

默认情况下，曲线图处于解锁状态。解锁时，显示哪些骨骼行取决于视口或层级树选择。如果选择了一些骨骼(或骨骼下的项目)，则仅显示这些骨骼的骨骼行，并自动设置其可见点。

如果在视口或层级树中未选择骨骼，则会显示所有骨骼行。如果只有几个骨骼，则会自动设置其可见点。但是，如果有许多骨骼，则只会设置第一个骨骼的可见点，因为一次查看许多骨骼的所有曲线并不实用。

当一次只需要查看一个骨骼的关键帧时，使用未锁定的曲线图非常有用。在处理多个骨骼时，锁定曲线图内容会更方便。

## 锁定

![](/img/spine-user-guide/graph/lock.png)

单击锁定按钮可锁定曲线图，保留显示的骨骼行。锁定时，更改视口或层级树选择不会影响显示哪些骨骼行。

锁定曲线图在处理多个骨骼或一组特定骨骼时非常有用，可以在选择不同骨骼的同时看到多个骨骼行。

#### 刷新

![](/img/spine-user-guide/graph/lock-refresh.png)

刷新按钮可更新曲线图以显示当前选择的骨骼行。这相当于再次解锁和锁定曲线图。

#### 选择

![](/img/spine-user-guide/graph/lock-select.png)

选择按钮可在视口中为当前显示的所有骨骼行选择骨骼。选择骨骼、修改选择，然后单击刷新以更改曲线图中显示的骨骼行，这是很有用的。

## 顺序

骨骼行按照骨骼被选择的顺序显示在曲线图中。可以通过上下拖动骨骼行来重新排列它们。

# 筛选器

可以对曲线图进行筛选，以仅显示选定的属性类型。单击筛选器按钮可选择将显示的属性类型。当筛选器处于活动状态时，筛选器按钮为红色。

![](/img/spine-user-guide/graph/filter-graph.png)

按住`ctrl`(Mac为`cmd`)或`shift`可选择多个筛选器。`重置`按钮选择所有筛选器。

在`当前工具`处于活动状态时，只会显示当前[变换工具](/spine-tools#骨骼变换)对应的[骨骼变换](/spine-tools#骨骼变换)属性。

右键单击筛选器按钮可打开或关闭筛选器。

# 曲线

关键帧在曲线图中显示为小方块。X轴上的位置表示关键帧的[帧](/spine-keys#帧)，并对应于曲线图上方的时间轴。Y轴上的位置表示关键帧的值，与曲线图右边缘上的标签相对应。

![](/img/spine-user-guide/graph/keys.png)

将在关键帧之间绘制线条，以显示值如何在关键帧之间变化。

当曲线急剧弯曲或非常大时，可能会看到构成曲线的线段，这并非错误，而是曲线图准确地显示了曲线在运行时的近似方式。如果曲线不够平滑，可以通过再添加一个关键帧轻松修复。

当曲线图显示多条曲线时，一些曲线可能会出现在另一些曲线的后面。选择或将鼠标悬停在关键帧或控制柄上，可使该曲线绘制在上面。

## 重复

禁用[重复](/spine-keys#重复)时，设置姿势显示在第一个关键帧的左侧，最后一个关键帧的值显示在最后一个关键帧的右侧。

![](/img/spine-user-guide/graph/repeat-disabled.png)

启用重复时，曲线在动画之前和之后模糊显示，以便查看动画开始和结束处的过渡。此外，如果第一个关键帧和最后一个关键帧具有相同的值并且是贝塞尔，则控制柄将显示在相反的关键帧上。

![](/img/spine-user-guide/graph/repeat-enabled.png)

曲线图底部的箭头按钮(在第0帧下)可在第0帧之前添加更多空间。

## 分离属性

![](/img/spine-user-guide/graph/separate-rgba.png)

单个属性可以有多条曲线。例如，RGBA属性有四条曲线：红色、绿色、蓝色和Alpha。属性的每个关键帧都存储了所有曲线的值，但是使用贝塞尔曲线时，每条曲线都有自己的控制柄，可以单独调整。

一些值通常作为单个属性来一起设置关键帧，这些值是可以“分离”的，以便每个值都可以单独设置关键帧。骨骼变换[X和Y](/spine-keys#分离X和Y)和插槽[颜色和Alpha](/spine-keys#分离颜色和Alpha)属性都可以分离。

## 曲线类型

每个关键帧都有一个确定该关键帧和下一个关键帧之间插值的“曲线类型”。若要设置曲线类型，请选择一个或多个关键帧，然后单击其中一个曲线类型按钮。

#### 阶跃

![](/img/spine-user-guide/graph/curvetype-stepped.png)

阶跃曲线类型将保持关键帧的值，直至到达下一个关键帧。

#### 线性

![](/img/spine-user-guide/graph/curvetype-linear.png)

线性曲线类型使用直线在关键帧之间进行插值。这意味着随着时间轴位置从该关键帧移动到下一个关键帧时，该值以恒定的速率变化。

#### 贝塞尔

![](/img/spine-user-guide/graph/curvetype-bezier.png)

贝塞尔“Bezier”(发音为`bez-ee-ay`)曲线类型使用贝塞尔曲线在关键帧值之间进行插值。该曲线有两个控制柄，可以拖动这两个控制柄来自定义关键帧之间的值变化速率。

如果选定的关键帧已经是贝塞尔，并且单击了贝塞尔按钮，则控制柄将重置为其默认位置。

## 预设

![](/img/spine-user-guide/graph/presets.png)

提供有多个预设按钮来设置贝塞尔控制柄位置。这些按钮还会将曲线类型设置为贝塞尔(如果尚未设置)。

#### 自动

![](/img/spine-user-guide/graph/preset-automatic.png)

启用后，控制柄将设置为自动。控制柄图标将更改为三角形，并且控制柄的角度将根据关键帧之前和之后的关键帧的值自动调整。如果手动移动控制柄，将改回手动控制柄。

自动控制柄通常效果很好。所以首先应用自动控制柄，然后仅在必要时手动调整它们，这是很实用的做法。

#### 分离

![](/img/spine-user-guide/graph/preset-separate.png)

启用时，控制柄是分离的，因此移动一个控制柄不会影响关键帧另一侧的控制柄。这会导致曲线中出现尖点，其中关键帧的值过渡不平滑。

拖动控制柄前按住`alt`(Mac上为`option`)可分离控制柄。拖动时按`alt`可开启和关闭分离控制柄。

#### 平坦

![](/img/spine-user-guide/graph/preset-flat.png)

将移动控制柄使其变平坦，使其与关键帧垂直对齐。

#### 反弹

![](/img/spine-user-guide/graph/preset-bounce.png)

分离控制柄并移动它们，使其大致指向上一个关键帧和下一个关键帧的方向。这在突然更改方向时非常有用，例如球反弹时。

#### 缓出

![](/img/spine-user-guide/graph/preset-ease-out.png)

移动控制柄，以便值在关键帧附近变化得更慢。

#### 缓入

![](/img/spine-user-guide/graph/preset-ease-in.png)

移动控制柄，以便值在下一个关键帧附近变化得更慢。

# 导航

<callout>启用[自动缩放](#自动)可大大减少手动调整曲线图视图的需要。</callout>

曲线图视图会显示设置了可见点的[曲线图行](#行)的曲线。曲线区域可以通过平移和缩放进行导航，就像[视口](/spine-ui#视口)一样。

可使用鼠标右键或热键来[平移](/spine-ui#平移)。

使用鼠标滚轮或热键可对X轴和Y轴进行等量[缩放](/spine-ui#缩放)。要以不同的量缩放每个轴，请在使用鼠标右键拖动的同时按住`alt`(Mac上为`option`)。

## 帧

![](/img/spine-user-guide/graph/frame.png)

单击`帧`按钮时，曲线图视图将被缩放和平移，以便所有曲线都可见。如果在曲线图中选择了关键帧或控制柄，则会缩放和平移曲线图视图，以便仅显示可见的关键帧或控制柄。

## 自动

![](/img/spine-user-guide/graph/frame-auto.png)

当开启`自动`时，曲线图视图会自动缩放，以保持所有曲线都可见。Spine使用智能自动缩放，可避免进行不必要的调整。但仍然可以手动调整缩放。

大部分时间启用`自动`是很常见的，因为可大大减少手动调整曲线图视图的需要。

# 选择

单击可选择关键帧或控制柄。对于关键帧，如果启用了[跳转到关键帧](/spine-settings#跳转到关键帧2)，则还会将时间轴位置设置为所选关键帧。按住`ctrl`(Mac上为`cmd`)可切换选择或选择多个关键帧或控制柄。

如果单击关键帧时曲线图为[锁定](#锁定)状态，则会在视口或层级树中选择该关键帧的项目。这样可以更容易地修改选定的关键帧。

右键单击关键帧可在视口或层级树中选择该关键帧的项目。当曲线图解锁并显示多条曲线时，右键单击关键帧将更改曲线图，使其仅显示与该关键帧关联的骨骼的曲线。

选中某个关键帧或控制柄后，按`ctrl+a`(Mac上为`cmd+a`)可选择同一条曲线上的所有关键帧或控制柄。再按一次可选择曲线图中显示的所有关键帧或控制柄。

在曲线图中选择关键帧时，在摄影表中也会选择相同的关键帧。同样，在摄影表中选择关键帧时，也会在曲线图中选中它们。

## 同步

启用摄影表[同步](/spine-dopesheet#同步)时，摄影表将显示曲线图中可见曲线的行。在某些情况下，使用摄影表移动关键帧会更容易，尤其是摄影表[概览行](/spine-dopesheet#Overview-row)。

## 框选

如果未选择关键帧或控制柄，在空白区域中拖动可框选关键帧。[取消选择](/spine-tools#取消选择)可按`空格键`、`escape键`或单击曲线图中的空白区域。

![](/img/spine-user-guide/graph/box-select-nobox-gif.gif)

在拖动之前按住`ctrl`(Mac上为`cmd`)可选择从关键帧或控制柄上方开始框选。

要框选控制柄，请先选择一个控制柄，然后按住`ctrl`(Mac上为`cmd`)，然后拖动以进行框选。

要在不保留框选的情况下进行框选，请快速拖动并释放鼠标按钮。要在选择关键帧时保持框选状态，请拖动后短暂暂停，然后释放鼠标按钮。

![](/img/spine-user-guide/graph/box-select-gif.gif)

可以拖动框选的边缘来缩放选定的关键帧。缩放可用于反转关键帧的顺序，方法是将左侧边缘移过右侧，或将右侧边缘移过左侧。

![](/img/spine-user-guide/graph/scale-gif.gif)

在创建或缩放框选时，按住`shift`可禁用[帧对齐](/spine-keys#帧对齐)。

# 操作关键帧

可以通过拖动来移动选定的关键帧和控制柄。启用[拖动以编辑](/spine-settings#拖动以编辑)时，可以在空白区域中拖动以进行调整。开始拖动时按住`ctrl+shift`(Mac上为`cmd+shift`)可复制选中的关键帧。拖动时按住`shift`可禁用[帧对齐](/spine-keys#帧对齐)。

双击可删除关键帧

拖动控制柄时，按住`alt`(Mac上为`option`)同时拖动可切换[分离](#分离)。按住`shift`只调整长度。按住`ctrl+shift`(Mac上为`cmd+shift`)可同时调整两个控制柄的长度。

## 新关键帧

通常会为新关键帧指定线性曲线类型。但是，如果将关键帧放置在使用贝塞尔曲线或阶跃曲线的关键帧之间，则会改为为新关键帧指定贝塞尔曲线或阶跃曲线类型。对贝塞尔执行此操作后，将调整上一个关键帧、新关键帧和下一个关键帧的控制柄，以便曲线不会改变。这可在不更改曲线的情况下在动画中间添加新关键帧。

## 轴

![](/img/spine-user-guide/graph/axes.png)

轴按钮可将移动关键帧限制为仅向上/向下或向左/向右。

## 对齐

![](/img/spine-user-guide/graph/snapping.png)

当上下移动关键帧时，它将水平对齐到其原始帧。这可更改关键帧的值，而不会意外更改其帧。

当左右移动关键帧时，它将垂直对齐到其原始值。这可更改关键帧的帧，而不会意外更改其值。

启用关键帧对齐时，关键帧值将对齐到其他关键帧。当一个关键帧需要与另一个关键帧具有相同的值时，这会有所帮助。关键帧对齐可以对齐到任何关键帧，但更偏好同一曲线上的关键帧。要对齐到特定的关键帧，可先将鼠标短暂悬停在该关键帧上，然后移动所需的关键帧，这样它就会偏好对齐到悬停的关键帧。

按住`shift+alt`(Mac上的`shift+option`)可以临时启用或禁用关键帧对齐。

应用任何对齐时，将显示一条白线。

## 剪贴板按钮

![](/img/spine-user-guide/graph/clipboard.png)

请参见[剪贴板按钮](/spine-keys#剪贴板按钮)。

## 移位

![](/img/spine-user-guide/graph/key-shift.png)

请参见[移位](/spine-keys#移位)。

## 偏移

![](/img/spine-user-guide/graph/key-offset.png)

请参见[偏移](/spine-keys#偏移)。

## 为所有显示设置关键帧(Key shown)

![](/img/spine-user-guide/key-frames/key-shown.png)

请参见[为所有显示设置关键帧(Key shown)](/spine-keys#为所有显示设置关键帧%28Key-shown%29)。

## 控制柄模式

当左右移动关键帧以调整时间点时，控制柄通常保持不变，这可能会破坏曲线，特别是在控制柄不平坦的情况下。Spine提供两种控制柄模式，以便自动调整正在移动的关键帧的控制柄和相邻关键帧的控制柄。这样可以减少在移动关键帧后调整控制柄的需要。

#### 值

启用后，控制柄将水平缩放。曲线达到的最小值和最大值保持不变。

#### 形状

启用后，控制柄将移动以保持曲线的原始形状。曲线达到的最小值和最大值可能会改变。

# 偏好

[youtube:RUzXpwwt6hM]

偏好按钮显示偏好滑块，这是一个工作流程工具，可帮助你创建更像上一个关键帧或下一个关键帧的分解姿势。

![](/img/spine-user-guide/graph/favor.png)

分解姿势是一种中间姿势。它本身不起作用，需要主要姿势来解释动作。主要姿势描述正在发生的事情，而它们之间的分解姿势则告诉我们它是*如何*发生的，也就是说，哪些部分先移动，移动多远，朝哪个方向移动，等等。分解姿势增加了基本动作的趣味性，极大地提高了动画的质量。

要使用偏好滑块，请将时间轴置于两个关键帧之间，然后拖动偏好滑块。向左拖动它会将关键帧移向当前帧之前的关键帧。向右拖动它会将关键帧移向当前帧之后的关键帧。可以使用热键来更快地使用偏好滑块。有关更多用法信息，请参见上面的视频。

选择关键帧后，拖动偏好滑块可以调整这些关键帧。未选择关键帧时，拖动偏好滑块可为所有可见曲线设置关键帧，如[显示的关键帧](/spine-keys#Key-shown)，并调整这些关键帧。

偏好滑块具有控制关键帧移动方式的模式。`偏好`模式是最常用的，但其他模式偶尔也会派上用场。

* `偏好` 将关键帧向上一个/下一个关键帧移动。选择多个关键帧时，距离下一个/上一个关键帧越远的关键帧移动速度越慢。
* `混合` 将关键帧向上一个/下一个关键帧移动，如同`偏好`。选择多个关键帧时，所有关键帧将以相同的速度移动。
* `移位` 将关键帧一起移动到上一个/下一个关键帧，它们之间不会发生相对变化。
* `线性` 将关键帧移动到下一个/上一个关键帧之间的一条线上。
* `平均值(曲线)` 在同一曲线上将关键帧移向下一个/上一个关键帧的平均值。
* `平均值(帧)` 在同一帧上将关键帧移向其他选定关键帧的平均值。
* `平均值(所有)` 将所有曲线的选定关键帧移动到下一个/上一个关键帧的平均值。
* `默认` 将关键帧移向默认值。通常该值为0，但某些属性使用其他值。例如，比例使用1。
* `设置` 将关键帧移向设置姿势值。
* `存储` 将关键帧移向存储的曲线。使用[存储](#存储)设置存储的曲线。

拖过滑块的边缘会将关键帧移动到下一个或上一个关键帧之外。这可以用来实现过冲。

单击心形图标会将滑块重置到中间。这相当于取消选择，然后再次进行相同的选择。

# 存储

![](/img/spine-user-guide/graph/store.gif)

`存储`按钮存储整个动画的所有当前关键帧和控制柄。存储的曲线在后台绘制，可用作调整关键帧和控制柄时的参考。再次单击`存储`可清除存储的关键帧和控制柄。

`交换`按钮可将存储的关键帧和控制柄与当前的关键帧和控制柄进行交换。

你可以`存储`，对你的动画进行更改，然后`交换`，看看是否更喜欢新的更改。它还可以与`存储`[偏好](#偏好)模式一起使用，以调整关键帧朝向或远离存储的曲线。

# 查看设置

#### 隐藏工具栏

![](/img/spine-user-guide/graph/hide-toolbar.png)

选中后，曲线图工具栏将隐藏。当不需要工具栏按钮或使用热键时，这可以节省一些垂直空间。

#### 隐藏行

![](/img/spine-user-guide/graph/hide-rows.png)

选中后，曲线图行将隐藏。这可以节省横向空间，但如果没有行，可见点就不能用来控制哪些曲线可见。

# 视频

[Bilibili](https://www.bilibili.com/video/BV1fa4y1n7Fz/)
<iframe src="//player.bilibili.com/player.html?bvid=BV1fa4y1n7Fz&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>!!

[youtube:37CeFRzrjqc]

[下一节: 网格工具](/spine-mesh-tools)
[上一节: 幻影](/spine-ghosting)
[Spine用户指南: 目录]