动画功能介绍

AnimationPlayer 节点允许你创建从简单到复杂的任何动画。

在本指南中,你将学会:

  • 使用动画面板

  • 使任何节点的任何属性变成动画

  • 创建简单的动画

在 Godot 中,你可以对“检查器”中可用的任何内容设置动画,例如 Node 的变换、精灵、UI 元素、粒子、可见性、材质的颜色等等。你还可以修改脚本变量的值、甚至调用任何函数。

创建 AnimationPlayer 节点

要使用动画工具, 我们首先必须创建一个 AnimationPlayer 节点.

AnimationPlayer节点类型是动画的数据容器。一个AnimationPlayer节点可以保存多个动画,这些动画可以自动相互过渡。

AnimationPlayer节点

AnimationPlayer节点

创建 AnimationPlayer 节点后,单击它以打开视口底部的动画面板。

动画面板位置

动画面板位置

动画面板由四部分组成:

动画面板

动画面板

  • 动画控件(即添加, 加载, 保存和删除动画)

  • 轨道列表

  • 带有关键帧的时间轴

  • 时间轴和轨道控件,例如,你可以在其中缩放时间轴和编辑轨道。

计算机动画依赖于关键帧

关键帧定义属性在某个时间点的值。

菱形代表时间轴中的关键帧。两个关键帧之间的线表示该值未更改。

Godot中的关键帧

Godot中的关键帧

你设置节点属性的值并为其创建动画关键帧。当动画运行时,引擎将在关键帧之间插入值,使它们随着时间的推移逐渐变化。

只需两个关键帧就可以获得一个平滑运动

只需两个关键帧就可以获得一个平滑运动

时间轴定义动画需要多长时间。你可以在不同的点插入关键帧,并更改其时间。

动画面板中的时间轴

动画面板中的时间轴

动画面板中的每一行都是引用节点的普通或变换属性的动画轨道。每个轨道存储节点的路径及其受影响的属性。例如,图中的位置轨迹指的是 Sprite2D 节点的 position 属性。

普通动画轨道的示例

普通动画轨道的示例

小技巧

如果你的动画属性错误,你可以随时通过双击轨道并输入新路径来编辑轨道的路径。使用 “从头开始播放” 按钮|从头开始播放|(或按键盘上的 Shift + D )播放动画,可以立即看到变化.

教程:创建简单的动画

场景设置

在本教程中,我们将创建一个 AnimationPlayer 节点,并将精灵(Sprite)节点作为其子节点。我们会让这个精灵在屏幕上的两点之间进行移动。

我们的场景设置

我们的场景设置

警告

AnimationPlayer 继承自 Node 而不是 Node2D 或者 Node3D。因为层级中间出现了普通的 Node 节点,所以它的子节点不会继承父节点的变换。

所以,不建议把具有 2D 或者 3D 变换的节点设置成 AnimationPlayer 节点的子节点。

精灵拥有图像纹理。在本教程中,选择 Sprite2D 节点,在检查器中单击 Texture ,然后单击“加载”。精灵的纹理选择为默认的 Godot 图标。

添加动画

选中 AnimationPlayer 节点,然后点击动画编辑器中的“动画”按钮。从列表中选择“新建”( 添加动画 )来添加一个新的动画,并在对话框中为该动画输入名称。

添加新动画

添加新动画

管理动画库

出于可复用性,动画被注册在动画库资源的列表中。如果你将动画添加到 AnimationPlayer 而不指定任何特定设置,则该动画将默认注册到 AnimationPlayer 具有的 [Global] 动画库中。

管理动画

管理动画

如果有多个动画库并且你尝试添加动画,则会出现一个包含选项的对话框。

添加带有库选项的新动画

添加带有库选项的新动画

添加轨道

要为我们的精灵添加一个新的轨道,请选择它并在工具栏中查看:

方便按钮

方便按钮

这些开关和按钮允许你为所选节点的位置、旋转和缩放添加关键帧。由于我们仅对精灵的位置进行动画处理,因此请确保仅选择位置开关。所选开关为蓝色。

单击钥匙按钮(插入关键帧)创建第一个关键帧。由于我们还没有为 Position 属性设置轨道,Godot 将主动为我们创建它。点击 创建

Godot 将创建一个新轨道,并在时间轴的开头插入我们的第一个关键帧:

精灵轨道

精灵轨道

第二个关键帧

我们需要设置我们的精灵的最终目的地,以及它到达那里需要多长时间。

假设我们希望在点之间移动需要两秒钟。默认情况下,动画设置为仅持续一秒,因此请在动画面板时间轴标题右侧的控件中将动画长度更改为 2。

动画长度

动画长度

现在,将精灵向右移动到其最终位置。可以使用工具栏中的 移动工具 或在 检查器 中设置* Position* 的 X 值。

点击动画面板 2 秒附近的时间轴标题,然后单击工具栏中的钥匙按钮以创建第二个关键帧。

运行动画

点击“从头开始播放”(从头开始播放)按钮。

好极了! 我们的动画运行:

动画

动画

Autoplay on load

为实现动画自动播放,点击动画编辑器中“编辑”按钮左边的“加载后自动播放”按钮即可。可在AnimationPlayer结点所在场景运行时或动画加入了另一个场景中时使用。

../../_images/autoplay_on_load.webp

它的图标也会出现在动画名称的前面,这样你就可以很容易地识别哪个是自动播放的动画。

来来回回

Godot 有一个我们可以在动画中使用的有趣的功能。当设置了动画循环但动画末尾没有指定关键帧时,第一个关键帧也是最后一个关键帧。

这意味着我们现在可以将动画长度延长到四秒,Godot 还将计算从最后一个关键帧到第一个关键帧的帧,来回移动我们的精灵。

动画循环

动画循环

你可以通过更改轨道的循环模式来更改此行为。这将在下一章中介绍。

轨道设置

Each property track has a settings panel at the end, where you can set its update mode, track interpolation, and loop mode.

轨道设置

轨道设置

轨道的更新模式告诉 Godot 何时更新属性值。这可以是:

  • 连续:每帧都更新属性

  • 离散:仅在位于关键帧时更新属性

  • 捕获:如果第一个关键帧的时间大于 0.0,就会记录该属性的当前值,并将其与第一个动画帧混合。例如,利用“捕获”模式,你可以将处于任意位置的节点移动到特定的位置。

轨道模式

轨道模式

在普通动画中,你通常使用“连续”。其他类型可用于编排复杂动画。

轨迹插值告诉 Godot 如何计算关键帧之间的帧值,支持的插值模式有:

  • 临近:设置为最接近的关键帧的值

  • 线性:使用线性函数计算两个关键帧之间的值

  • 三次方:使用三次函数计算两个关键帧之间的值

  • 线性角(仅出现在旋转属性中):具有最短路径旋转的线性模式

  • 三次角(仅出现在旋转属性中):具有最短路径旋转的立方模式

轨道插值

轨道插值

利用三次插值,动画在关键帧处的速度较慢,而在关键帧之间的速度较快,从而使动作更加自然。立体插值常用于角色动画。线性插值以固定的速度进行动画变化,从而产生更加机械的效果。

Godot支持两种循环模式,如果将其设置为循环时,则会影响动画效果:

循环模式

循环模式

  • 钳位循环插值: 选择此选项后, 动画将在此轨道的最后一个关键帧之后停止. 再次到达第一个关键帧时, 动画将重置为其值.

  • 包循环插值: 当选择此项时,Godot会在最后一个关键帧之后计算动画, 以再次达到第一个关键帧的值.

其他属性的关键帧

Godot的动画系统不仅限于位置、旋转和缩放。你可以对任何属性进行动画化。

如果你在动画面板可见时选择你的精灵,Godot 会在 检查器 中为精灵的每个属性显示一个小的关键帧按钮,点击这个按钮,Godot就会自动为当前动画添加一个轨道和关键帧。

其他属性的关键帧

其他属性的关键帧

编辑关键帧

你可以在动画时间轴上点击关键帧,以在*属性面板*中显示和编辑其值。

关键帧编辑器编辑一个键

关键帧编辑器编辑一个键

此外,你还可以通过点击并拖动关键帧的缓和曲线,在这里编辑关键帧的缓和值。这将告诉 Godot 在动画属性到达该关键帧时如何进行插值。

你可以通过这种方式调整动画,直到运动“看起来正确”。

使用 RESET 轨道

你可以设置一个特殊的 RESET(重置)动画来包含“默认姿势”。这样就可以保证在保存场景并重新在编辑器中打开时,会恢复默认姿势。

对于已存在的轨道,你可以添加一个名为“RESET”(大小写敏感)的动画,然后为每一个你希望重置的属性添加轨道。应该只在时间为 0 处存在一个关键帧,其值为每条轨道所期望的默认值。

如果 AnimationPlayer 的 Reset On Save(保存时重置)属性为 true,场景在保存时会应用重置动画的效果(相当于寻道到 0.0 时间点的效果)。只有保存的文件会受到影响——编辑器中的属性轨道还是会保持原样。

如果你想要在编辑器中重置轨道,请选中 AnimationPlayer 节点,打开 动画 底部面板,然后选择动画编辑器 动画 下拉菜单中的 应用重置

使用检查器中某个属性旁边的关键帧图标时,编辑器会询问你是否要自动创建一个RESET轨道。

备注

RESET轨道也被用作混合的参考值。另见更好的混合

洋葱皮

Godot 的动画编辑器允许你在创建动画时使用洋葱蒙皮。要启用此功能,请单击动画编辑器右上角的洋葱图标。此时,在动画对象先前位置将有透明红色副本显示出来。

../../_images/onion_skin.webp

与洋葱皮按钮相邻的三个圆点按钮可以打开一个下拉菜单,你可以用它来调整洋葱皮的工作方式,包括在未来的帧中使用洋葱皮的能力。