The class_AnimationPlayer node allows you to create anything
from simple to complex animations.

In this guide you learn to:

Work with the Animation Panel

Animate any property of any node

Create a simple animation

Call functions with the powerful Call Function Tracks

In Godot, you can animate anything available in the Inspector, such as
Node transforms, sprites, UI elements, particles, visibility and color
of materials, and so on. You can also modify values of script variables
and call any function.

A keyframe defines the value of a property at a certain point in time.

Diamond shapes represent keyframes in the timeline. A line between two
keyframes indicates that the value hasn’t changed.

Keyframes in Godot

The engine interpolates values between keyframes, resulting in a gradual
change in values over time.

Two keyframes are all it takes to obtain a smooth motion

The timeline lets you insert keyframes and change their timing. It also
defines how long the animation is.

The timeline in the animation panel

Each line of the Animation Panel is an animation track. Normal and
Transform tracks reference node properties. Their name or id is a path
to the node and the affected property.

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 (Default shortcut:
Shift+D) to see the changes instantly.

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

Our scene setup

The sprite holds an image texture and we animate that sprite to move
between two points on the screen. For this tutorial use the default Godot
Icon as the sprites“ texture. As a starting point, move the sprite
to a left position on the screen.

Совет

Adding animated nodes as children to the AnimationPlayer node is not
required, but it is a nice way of distinguishing animated nodes from
non-animated nodes in the Scene Tree.

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

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 behaviour 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:

Continuous: Update the property on each frame

Discrete: Only update the property on keyframes

Trigger: Only update the property on keyframes or triggers

Capture: The current value of a property is remembered, and it will blend with the first animation key found

Track mode

In normal animations, you usually use «Continuous». The other types are
used to script complex animations.

The interpolation tells Godot how to calculate the frame values between
the keyframes. These interpolation modes are supported:

Nearest: Set the nearest keyframe value

Linear: Set the value based on a linear function calculation between
the two keyframes

Cubic: Set the value based on a cubic function calculation between
the two keyframes

Track interpolation

Cubic interpolation leads to a more natural movement, where the
animation is slower at a keyframe and faster between keyframes. This is
usually used for character animation. Linear interpolation creates more
of a robotic movement.

Godot supports two loop modes, which affect the animation if it’s set to
loop:

Loop modes

Clamp loop interpolation: When this is selected, the animation stops
after the last keyframe for this track. When the first keyframe is
reached again, the animation will reset to its values.

Wrap loop interpolation: When this is selected, Godot calculates the
animation after the last keyframe to reach the values of the first
keyframe again.

Godot doesn’t restrict you to only edit transform properties. Every
property can be used as a track where you can set keyframes.

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

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

For example, the class_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.

Add a class_AudioStreamPlayer to the Scene Tree and setup a
stream using an audio file you put in your project.

Click on «Add track» () on the animation panel’s track
controls.

Select «Add Call Method Track» from the list of possible track types.

Add Call Method Track

Select the class_AudioStreamPlayer node in the selection
window. Godot adds the track with the reference to the node.

Select 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.

When Godot reaches the keyframe, Godot calls the
class_AnimationPlayer 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.