2D动画功能简介

概览

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

在本指南中,您将学会:

  • 使用动画面板
  • 使任何节点的任何属性变成动画
  • 创建一个简单的动画
  • 使用功能强大的Call Function Tracks调用函数

在Godot中,你可以为属性面板中可用的任何内容设置动画。例如节点转换,子画面,UI元素,粒子,材质的可见性和颜色等等。您还可以修改脚本变量的值并调用任何函数。

创建一个AnimationPlayer节点

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

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

The AnimationPlayer node

AnimationPlayer节点

创建后,单击节点选项卡中的AnimationPlayer节点,打开视窗底部的动画面板。

The animation panel position

动画面板位置

它由四部分组成:

The animation panel

动画面板

  • 动画控件(即添加、加载、保存和删除动画)
  • 轨道列表
  • 带有关键帧的时间轴
  • 时间轴和轨道控件,例如,您可以在其中缩放时间轴和编辑轨道。

计算机动画依赖于关键帧

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

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

Keyframes in Godot

Godot中的关键帧

引擎在关键帧之间插入值,导致值随时间逐渐变化。

Two keyframes are all it takes to obtain a smooth motion

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

时间轴可以让你插入关键帧并更改它们的时序。它还定义动画的时间。

The timeline in the animation panel

动画面板中的时间轴

动画面板的每一行都是一个动画轨道。普通和转换轨道引用节点属性。它们的名称或id是指向节点和受影响属性的路径。

Example of Normal animation tracks

普通动画轨道的示例

小技巧

If you animate the wrong property, you can edit a track’s path anytime. Double click on it and type the new path. Play the animation using the “Play from beginning” button Play from beginning (or pressing Shift + D on keyboard) to see the changes instantly.

教程:创建一个简单的动画

场景设置

For this tutorial, we’ll create an AnimationPlayer node and a sprite node as its child.

Our scene setup

我们的场景设置

The sprite holds an image texture. We animate that sprite to move between two points on the screen. For this tutorial, use the default Godot icon as the sprite’s texture. As a starting point, move the sprite to a left position on the screen.

小技巧

将动画节点作为子节点添加到AnimationPlayer节点不是强制要求的,但是这是一种很好的方法来区分动画节点和场景树中的非动画节点。

Select the AnimationPlayer node, then click the “Animation” button in the animation editor. From the list select “New” (Add Animation) to add a new animation. And Enter a name for the animation in the dialog box.

Add a new animation

添加一个新的动画

添加轨道

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

Convenience buttons

方便按钮

这些开关和按钮允许您为选择的节点的位置、旋转和比例分别添加关键帧。

取消选择旋转,因为我们只对本教程的精灵位置感兴趣,并单击键按钮。

As we don’t have a track already set up for the transform/location property, Godot asks whether it should set it up for us. Click Create.

这会在时间轴的开头创建一个新轨道和第一个关键帧:

The sprite track

精灵跟踪

第二个关键帧

现在我们需要设置我们的精灵应该到达的目的地以及到达那里需要多长时间。

让我们说,我们希望它需要2秒才能到达另一个点。 默认情况下,动画设置为仅持续1秒,因此在动画面板下方面板的时间轴控件中将其更改为2。

Animation length

动画长度

Click on the timeline header near the 2-second mark and move the sprite to the target destination on the right side.

再次单击工具栏中的键按钮。 这创建了我们的第二个关键帧。

运行动画

单击“从头开始播放``(|从开头播放|)按钮。

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

The animation

动画

来来回回

Godot has an additional feature here. Like said before, Godot always calculates the frames between two keyframes. In a loop, the first keyframe is also the last keyframe, if no keyframe is specified at the end.

Animation loop

动画循环

If you set the animation length to 4 seconds now, the animation moves back and forth. You can change this behavior if you change the track’s loop mode. This is covered in the next chapter.

跟踪设置

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

Track settings

跟踪设置

The update mode of a track tells Godot when to update the property values. This can be:

  • 连续:更新每个帧的属性
  • 离散:仅更新关键帧上的属性
  • 触发器:仅更新关键帧或触发器上的属性
  • Capture: The current value of a property is remembered, and it will blend with the first animation key found

Track mode

Track mode

在普通动画中,您通常使用“连续”。 其他类型用于编写复杂动画的脚本。

插值告诉Godot如何计算关键帧之间的帧值。 支持这些插值模式:

  • 最近:设置最近的关键帧值
  • 线性:根据两个关键帧之间的线性函数计算设置值
  • Cubic:根据两个关键帧之间的三次函数计算设置值

Track interpolation

轨道插补

立方插值导致更自然的运动,其中动画在关键帧处较慢而在关键帧之间更快。 这通常用于角色动画。 线性插值创造了更多的机器人运动。

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

Loop modes

循环模式

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

其他属性的关键帧

Godot不限制您只编辑变换属性。 每个属性都可以用作可以设置关键帧的轨道。

If you select your sprite while the animation panel is visible, you get a small keyframe button for all the sprite’s properties. Click on this button and Godot automatically adds a track and keyframe to the current animation.

Keyframes for other properties

其他属性的关键帧

编辑关键帧

For advanced use and to edit keyframes in detail, You can click on them to bring up the keyframe editor in the inspector. You can use this to directly edit its values.

Keyframe editor editing a key

关键帧编辑器编辑一个键

Additionally, you can also edit the easing value for this keyframe by clicking and dragging the easing setting. This tells Godot, how to change the property values when it reaches this keyframe.

当这个动作“看起来不正确”时,您通常会以这种方式调整您的动画。

高级:调用方法轨道

Godot’s animation engine doesn’t stop here. If you’re already comfortable with Godot’s scripting language GDScript 基础 and Godot API you know that each node type is a class and has a bunch of callable methods.

For example, the AudioStreamPlayer node type has a method to play an audio stream.

Wouldn’t it be great to use a method at a specific keyframe in an animation? This is where “Call Method Tracks” come in handy. These tracks reference a node again, this time without a reference to a property. Instead, a keyframe holds the name and arguments of a method, that Godot should call when it reaches this keyframe.

To demonstrate, we’re going to use a call method track to play audio at a specific keyframe. Normally to play audio you should use an audio track, but for the sake of demonstrating methods we’re going to do it this way.

在场景树中添加 AudioStreamPlayer,并使用放在项目中的音频文件设置流。

单击动画面板轨道控件上的“添加轨道”(|添加轨道|)。

Select “Add Call Method Track” from the list of possible track types.

Add Call Method Track

Add Call Method Track

在选择窗口中选择 :ref:`class_AudioStreamPlayer`节点。 Godot添加了轨道节点的引用。

Select AudioStreamPlayer

选择AudioStreamPlayer

Right click the timeline where Godot should play the sample and click the “Insert Key” option. This will bring up a list of methods that can be called for the AudioStreamPlayer node. Select the first one.

../../_images/animation_method_options.png

When Godot reaches the keyframe, Godot calls the AudioStreamPlayer node’s “play” function and the stream plays.

You can change its position by dragging it on the timeline, you can also click on the keyframe and use the keyframe settings in the inspector.

../../_images/animation_call_method_keyframe.png