# 关键帧 Spine中的动画效果是通过设置“关键帧”来完成的。关键帧定义了一个过渡的开始和结束时间及值。关键帧之间的任何位置都可以进行插值。骨架动画效果归结为关键帧定义的姿势和关键帧在时间轴上的位置。 # 动画 在设置关键帧之前，请确保你处于动画模式，并通过在层级树视图中设置动画可见点或在[动画视图](/spine-animations-view)中选择它来激活动画。 ![](/img/spine-user-guide/key-frames/animation-visible.png) 选择层级树中的`动画`节点，点击`新建...` `动画`可新建动画。 ## 文件夹 可以将动画组织到文件夹中。要创建文件夹，请选择一个动画，然后单击`新建...` `文件夹`。通过拖动动画可在文件夹之间移动。 ![](/img/spine-user-guide/key-frames/animation-folder.png) 在导出的骨架数据中，文件夹名称优先于动画名称以创建Spine运行时使用的最终名称。例如，如果`emotes`文件夹中有一个动画`wave`，则运行时的动画名称为`emotes/wave`。 # 时间轴 在动画模式下，骨骼的姿势来自当前时间轴位置和动画的关键帧。时间轴显示在曲线图、摄影表、时间轴和音频视图上。 ![](/img/spine-user-guide/dopesheet/timeline.png) 如果找不到导致动画末尾出现橙色垂直线的关键帧，很可能它是一个皮肤附件的变形关键帧或隐藏了一个骨骼。可在[层级树设置](/spine-tree#查看设置)中选中`显示所有皮肤附件`，或按`ctrl+H`(在Mac上为`cmd+H`)`显示所有骨骼/插槽`。 一旦设置了关键帧，它们将出现在[曲线图](/spine-graph)或[摄影表](/spine-dopesheet)视图中的时间轴下方。时间轴上的橙色菱形指示哪些帧至少有一个关键帧。橙色垂直线标记在最高帧上的关键帧，其决定动画持续时间。 与在视口中平移类似，使用鼠标右键拖动可以左右或上下平移时间轴。 在时间轴上滚动鼠标滚轮可以放大或缩小时间轴。摄影表左下角的缩放滑块指示当前缩放级别，可以拖动。在缩放滑块的右边是“缩放关键帧”按钮，它可以缩放时间轴，使所有关键帧都可见。 ![](/img/spine-user-guide/dopesheet/zoom.png) ## 时间轴位置 时间轴位置由青色垂直线表示。时间轴位置可以通过左键单击或拖动来设置。在时间轴中拖动是查看骨架姿势如何随时间变化的一种快捷方式。按住`Shift`可禁用帧对齐(参见下面的[帧](#帧))。 ![](/img/spine-user-guide/key-frames/timeline-position.png) 启用[重复](#重复)并将时间轴拖过最后一帧时，该位置将循环回到第一帧，但前提是在最后一帧之前开始拖动。这允许在循环动画上使用拖动。如果不需要此行为，则在最后一帧之后开始拖动或禁用重复。 ## 帧 时间轴被分成名为“帧”的时间单位。使用帧可以更轻松地选择一个离散时间位置并精确地同时设置多个关键帧。默认情况下，时间轴使用30帧/秒，但可以在[播放视图](/spine-playback#时间轴FPS)中进行更改。 有时动画在每一帧上看起来都很好，但在播放期间不需要帧之间的插值。 帧的存在只是为了方便。播放期间，时间轴位置在帧之间移动(除非禁用[插值](/spine-playback#插值))。可使用比时间轴显示的更高或更低的帧速率播放。 ## 帧对齐 单击或拖动时间轴时按住`Shift`键可禁用帧对齐，并设置帧之间的时间轴位置。这使你可以看到动画平滑插值，就像播放动画时一样，并可以根据需要在帧之间设置关键帧。 小数帧也可以用于非常短的过渡。例如，骨骼可能在第15帧有一个平移关键帧，然后在第15.01帧有另一个关键帧。 ![](/img/spine-user-guide/key-frames/non-integer.png) ## 重复 禁用后，将在动画结束后继续播放。 启用后，当播放到达有一个关键帧的最高帧时，将从第0帧开始播放。当多个骨架有活动动画时，将使用它们中有一个关键帧的最高帧。 重复按动画进行存储，但不以JSON或二进制数据导出。 # 设置关键帧 当设置新的时间轴位置而丢失未设置关键帧的更改时，可以使用撤消在新的时间轴位置恢复这些更改。如果最初在错误的帧上进行更改，这会很有帮助。 如果在时间轴位置更改时有要重做的更改，则无法以这种方式恢复姿势。 如果未启用[自动关键帧](#自动关键帧)，并且在动画模式下对骨架进行了更改，则这些更改不会自动作为关键帧存储在动画中。如果时间轴位置更改，则未设置关键帧的更改将丢失。要保留更改，需要通过单击已更改的每个属性的钥匙按钮对其设置关键帧。或者，可以使用`为所有修改设置关键帧(Key Edited)`热键，通过按键盘上的`K`键为所有修改的属性设置关键帧。 如果当前帧没有关键帧，则属性的关键帧按钮颜色为绿色；如果已进行更改但尚未设置关键帧，则该属性的关键帧按钮为橙色；如果该属性的当前帧处有关键帧，则该属性的关键帧按钮为红色。 ## 自动关键帧 当[主工具栏](/spine-tools#工具)开启`自动关键帧`时，每次更改时都会自动设置关键帧。这非常方便，始终启用自动关键帧是很常用的。但是，必须注意不要意外创建不需要的关键帧。 ![](/img/spine-user-guide/key-frames/autokey.png) ## 为所有显示设置关键帧(Key shown) 曲线图和摄影表工具栏上的`为所有显示设置关键帧(Key shown)`按钮可为曲线图中显示的所有曲线或摄影表中显示的所有行设置关键帧。也可以使用快捷键`ctrl+shift+L`(Mac上为`cmd+Shift+L`)。 ![](/img/spine-user-guide/key-frames/key-shown.png) 对已有关键帧的所有属性设置关键帧会产生组成当前姿势的关键帧。这非常有用，因为随后可以将这些关键帧移动到另一帧以在那里实现相同的姿势。 # 可设置关键帧的属性 以下各节列出了可以在Spine中设置关键帧的所有属性，以及在哪里可以找到设置关键帧按钮。 ## 骨骼变换 通过单击主工具栏中相应工具的数字输入旁的钥匙按钮，可以设置旋转、平移、缩放或剪切的关键帧。 ![](/img/spine-user-guide/key-frames/keys.png) 此外，如果骨骼的旋转、平移、缩放或剪切有任何未设置关键帧的更改，则层级树中该骨骼旁边会出现一个橙色钥匙按钮。单击此按钮将为未设置关键帧的变换更改创建关键帧。 ![](/img/spine-user-guide/key-frames/bone.png) ### 分离X和Y 默认情况下，骨骼的每个平移、缩放和剪切关键帧都会设置X和Y。这对于许多动画已经足够，并减少了在摄影表和曲线图中显示的时间轴数。它的效率也略高一些，因为需要在运行时应用的时间轴更少。 对于需要分离的动画，可以通过选中层级树属性中骨骼的`分离`复选框来分别设置X和Y的关键帧。分离后，骨骼的X和Y将分别显示在当前动画的曲线图和摄影表中。 ![](/img/spine-user-guide/bones/separate.png) ## 插槽附件 层级树中的[骨骼](/spine-bones#隐藏骨骼)和[插槽](/spine-slots#隐藏插槽)的可见性点仅用于隐藏编辑器中的骨骼和插槽，以减少混乱。隐藏骨骼和插槽是不可设置关键帧的，并且不会影响导出的数据。 要设置插槽的哪个附件可见，可点击可见点以在层级树中隐藏或显示所需的附件。要为插槽的附件可见性设置关键帧，可点击层级树中插槽旁的钥匙按钮，此处显示为橙色: ![](/img/spine-user-guide/key-frames/attachment.png) 可以通过设置插槽附件的关键帧来实现逐帧动画，以便每隔几帧显示一张不同的图片。有关使用示例，请参阅逐帧示例[演示](/spine-demos#Spine-with-frame-based-animation)或[示例项目](/spine-examples#Frame-by-frame)。 ## 插槽颜色 要为[插槽颜色](/spine-slots#颜色)设置关键帧，请单击层级树中颜色按钮旁边的钥匙按钮。 ![](/img/spine-user-guide/key-frames/color.png) ### 分离颜色和Alpha 默认情况下，插槽的每个颜色关键帧会同时设置颜色(RGB)和Alpha(A)。这对于许多动画来说已经足够了，并且减少了在摄影表和曲线图中显示的时间轴的数量。它的效率也略高一些，因为需要在运行时应用的时间轴更少。 对于需要分离的动画，可以通过选中层级树属性中插槽的`分离`复选框来分别设置颜色和Alpha的关键帧。 ![](/img/spine-user-guide/slots/separate.png) 分离后，插槽的颜色(RGB)和Alpha(A)时间轴将分别显示在当前动画的曲线图和摄影表中。此外，[插槽颜色](/spine-slots#颜色)会显示两个颜色按钮。左按钮使用Alpha显示颜色，并允许对Alpha设置关键帧。右按钮显示不透明颜色，并允许对颜色设置关键帧。单击任一按钮将打开相同的插槽颜色对话框，该对话框可以更改Alpha和/或颜色。 ![](/img/spine-user-guide/slots/separate-buttons.png) ## 绘制顺序 层级树中`绘制顺序`节点旁边的钥匙按钮可设置当前绘制顺序的关键帧。有关更多信息，请参见[绘制顺序](/spine-slots#绘制顺序)。 ![](/img/spine-user-guide/key-frames/draworder.png) ## 事件 层级树中每个事件旁边的钥匙按钮可设置[事件](/spine-events)关键帧。事件的整数、浮点、字符串、音量和均衡属性是一起设置关键帧的。 ![](/img/spine-user-guide/key-frames/event.png) 可以在设置关键帧之前更改事件的属性。这可以减少所需的事件数量。例如，你可以有一个`particles`事件，并使用每个关键帧的字符串值作为粒子名称在运行时显示。 ## 变形关键帧 设置变形关键帧在Spine中就称为“设置变形关键帧”。在其他软件中有时被称为“自由变形”。 若要为网格、路径、边界框或剪切附件的顶点位置设置变形关键帧，请点击层级树中附件旁边的钥匙按钮。 ![](/img/spine-user-guide/key-frames/mesh.png) 通常应优先使用[权重](/spine-weights)，只少量使用变形关键帧，原因如下： * 使用权重设置骨骼变形的关键帧只需要很少的动画数据。 * 变形关键帧可以显著增加动画数据的大小，特别是在与权重结合使用时。每个变形关键帧为每个骨骼存储影响每个顶点的每个骨骼的顶点位置(这是附件所需的[顶点变换](/spine-meshes#)数)。 * 虽然变形关键帧和权重都可以用于[链接网格](/spine-meshes#链接网格)，但是为权重设置动画的骨骼也可以用于任何其他附件。 * 附件的所有顶点可以一起设置关键帧。这样使用变形为同一附件的不同部分设置动画就会变得困难，这需要使用[顺序法](/spine-animating#顺序法)设置变形关键帧。 * 虽然可以使用`旋转`工具旋转顶点，但变形关键帧之间的插值会将一条直线上的顶点从一个关键帧移到下一个关键帧。 #### 变形高亮显示 在动画模式下，已移动的各个顶点显示为粉红色。按住`ctrl`并双击顶点可选中所有变形或未变形的顶点。 ![](/img/blog/3.8-released/deformed-vertices.png) ## IK约束 若要为[IK约束](/spine-ik-constraints)设置关键帧，可点击层级树中IK约束旁边的钥匙按钮。IK约束的混合、柔和度、弯曲方向、压缩和拉伸属性可一起设置关键帧。 ![](/img/spine-user-guide/key-frames/ik.png) ## 变换约束 要为[变换约束](/spine-transform-constraints)设置关键帧，可点击层级树中变换约束旁边的钥匙按钮。变换约束的旋转、X、Y、缩放X、缩放Y和剪切Y混合一起设置关键帧。 ![](/img/spine-user-guide/key-frames/transform-constraint.png) ## 路径约束 要为[路径约束](/spine-path-constraints)设置关键帧，点击层级树属性中路径约束的间距、位置或混合旁边的钥匙按钮。在为路径约束的混合设置关键帧时，旋转和平移混合将一起设置关键帧。 ![](/img/spine-user-guide/key-frames/path-constraint.png) 在为非[封闭](/spine-paths#封闭)的路径设置路径位置的关键帧时，有时需要将位置从0更改为100，然后再次立即从0更改为100。这可以使用[小数帧](/spine-keys#帧)来完成。例如，在第0、30、30.01和60帧为位置0、100、0和100设置关键帧。 # 操作关键帧 [摄影表](/spine-dopesheet)和[曲线图](/spine-graph)视图提供了工具栏按钮来操作关键帧。 ## 剪贴板按钮 ![](/img/spine-user-guide/dopesheet/copy-paste-keys.png) 从左到右: * `复制` 将选中的关键帧复制到剪贴板。也可以按`ctrl+C`(Mac为`cmd+C`)进行复制。 * `剪切` 将选中的关键帧复制到剪贴板并删除。也可以通过按`ctrl+X`(Mac上的`cmd+X`)进行剪切。 * `删除` 删除选中的关键帧。也可以通过按键盘上的`Delete`键或双击某个关键帧来执行删除操作。 * `粘贴` 将上次复制的关键帧粘贴到当前时间轴位置。粘贴也可以按`ctrl+V`(Mac为`cmd+V`)。 在粘贴之前选择其他骨骼、插槽或附件，可以将骨骼变换、颜色、插槽附件和变形关键帧粘贴到不同的骨骼、插槽或附件。 ## 移位 ![](/img/spine-user-guide/dopesheet/key-shift.png) 当开启`移位`并移动关键帧时，移动的关键帧之后的所有关键帧也会被移动。拖动关键帧的同时按住`alt`(Mac上为`option`)也可以使用`移位`。这在调整关键帧之间的时间点而不影响移动关键帧之后的关键帧时间点时非常有用。 ## 偏移 ![](/img/spine-user-guide/dopesheet/key-offset.png) `偏移`按钮用于移动循环动画的关键帧，如果关键帧经过动画末尾，则将关键帧绕回起点。这使得调整[跟随和重叠动作](https://youtu.be/ECM2WIN3cgY?t=202)变得很容易，跟随和重叠动作是使动画看起来自然的重要动画原理。 启用后，关键帧将移过动画的结尾或开头，关键帧将环绕以保持在动画的持续时间内。此外，将在动画的开始和结束处设置关键帧以保持循环移动。 ![](/img/spine-user-guide/dopesheet/offset-gif.gif) 也可以在按住`ctrl+alt`(Mac为`cmd+alt`)的同时，在摄影表或曲线图中拖动关键帧来激活`偏移`。 要使用`偏移`，第一个和最后一个关键帧必须相同。循环动画几乎总是这样。 当使用`偏移`时，会在动画循环的位置创建一个新的关键帧。如果再次移动相同的关键帧，则会记住原始关键帧并再次进行偏移，而无需创建第二个新关键帧。但是，一旦选择了其他关键帧，则会忘记原始关键帧，再次使用`偏移`会导致创建第二个新关键帧。 可以使用[循环](#循环)来控制`偏移`使用的起始帧和结束帧，否则使用动画的第0帧和最高帧。 # 清理 可以在层级树中选择多个动画，`清理`将一次处理所有动画。 动画层级树属性中的`清理`按钮可以删除所有不必要的关键帧。这些关键帧可以安全删除，而不会影响动画中的姿势。这包括在一行中为相同的值多次设置关键帧，设置与设置姿势相同的值的关键帧，以及许多其他情况。 ![](/img/spine-user-guide/key-frames/clean-up.png) 通常在设计动画时随意设置关键帧，然后使用`清理`会比较方便。使用较少的关键帧可以更轻松地处理动画，并减小导出动画数据的大小，特别是在移除变形关键帧时。此外，关键帧越少，在运行时应用动画所使用的CPU就越少。 未来Spine将允许将关键帧标记为“受保护”，这样`清理`就不会删除它们。 虽然`清理`通常可以安全使用，但在某些情况下，它可能会删除需要的关键帧。最常见的情况是要在较高的[AnimationState](/spine-applying-animations/#AnimationState-API)轨道上应用动画。在这种情况下，可能需要关键帧来覆盖较低轨道的动画。可能还存在其他罕见的情况，例如在运行时不使用[AnimationState](/spine-applying-animations/#AnimationState-API)，或者使用运行时代码查找关键帧并更改其值。 # 动手做 现在是时候亲自探索关键帧在Spine中的工作原理了。如果你还没有建立自己的骨架，可以打开其中一个示例项目，点击层级树中的`动画`节点，然后点击`新建...` `动画`来创建新的动画。在动画模式下，在第0帧处设置骨架姿势并设置关键帧(例如，按`K`或启用[自动关键帧](#自动关键帧))。接下来，点击第30帧，设置不同的骨架姿势并设置关键帧。通过拖动时间轴或单击播放可观看动画的实际效果。 # 视频 第1部分: [Bilibili](https://www.bilibili.com/video/BV1pA411H7sb/) !! [youtube:8ZvdFaPwMB0?list=PLwGl7Ikd_6GRFo7d0uRu_fN2RIlvkxW7b] 第2部分: [Bilibili](https://www.bilibili.com/video/BV1WT4y1N7KM/) !! [youtube:P13n2rhQGLE?list=PLwGl7Ikd_6GRFo7d0uRu_fN2RIlvkxW7b] [下一节: 制作动画](/spine-animating) [上一节: 工具](/spine-tools) [Spine用户指南: 目录]