Professional Documents
Culture Documents
Introduction
Godot's animation system is extremely powerful and flexible.
To begin, let's use the scene from the previous tutorial (Splash screen). The goal
is to add a "fade-in" animation to the splash image. Here's a copy just in case:
robisplash.zip.
../../_images/robisplash_anim_inspector.png
When a node of this type is selected, the animation editor panel will appear:
../../_images/robisplash_anim_editor.png
The animation editor panel stays visible until manually hidden.
../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png
Now that we have an animation, the property editor enters "animation editing" mode.
In this mode, a key icon appears next to every property of the property editor. In
Godot, any property of an object can be animated:
../../_images/robisplash_anim_property_keys.png
Editing the animation
The logo will appear from the top of the screen.
With the animation editor panel open, select the "logo" node and set the "Rect /
Position" property to (118, -400) and press the key button next to the property to
add a keyframe:
../../_images/robisplash_anim_logo_inspector_key.png
When the dialog appears, confirm that you are creating a new track.
../../_images/robisplash_anim_editor_keyframe.png
Move the editor cursor forward in time by clicking here:
../../_images/robisplash_anim_editor_track_cursor.png
Change the logo position to (118, 0) and add a keyframe again. With two keyframes
with different values, the animation happens.
../../_images/robisplash_anim_editor_keyframe_2.png
Pressing "Play selected animation from start" button on the animation panel (or
Shift + D on keyboard) will make the logo descend.
../../_images/robisplash_anim_editor_play_start.png
Click the "Autoplay on Load" button to set the animation to start automatically
when the scene starts.
../../_images/robisplash_anim_editor_autoplay.png
And finally, when running the scene, the animation should look like this:
../../_images/out.gif