Анимации

Введение

Анимационная система Godot чрезвычайно мощная и гибкая.

Для начала воспользуемся сценой из предыдущего урока (Заставка). Цель заключается в добавлении «появляющейся» анимации к заставке. Вот копия на всякий случай: robisplash.zip.

Add an animation player

Прежде всего, добавьте AnimationPlayer в сцену как дочерний узел «background» (корневой узел):

../../_images/robisplash_anim_inspector.png

При выборе узла данного типа появляется панель редактора анимаций:

../../_images/robisplash_anim_editor.png

Панель редактора анимаций остается видимой до тех пор, пока не будет скрыта вручную.

Создание анимации

It’s time to create a new animation! Press the Animation button then select new from the menu. Name the animation «intro» when the dialog appears.

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

Теперь, когда у нас есть анимация, редактор свойств переходит в режим «редактирования анимации». В этом режиме рядом с каждым свойством редактора свойств отображается значок ключа. В Godot, любое свойство объекта может быть анимировано:

../../_images/robisplash_anim_property_keys.png

Редактирование анимации

Мы хотим чтобы logo появился вверху экрана.

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

Когда появится диалоговое окно, подтвердите, что вы создаете новую дорожку.

The keyframe will be added in the animation player editor:

../../_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

Нажатие на кнопку «Воспроизвести выбранную анимацию с самого начала. (Shift-D)» на панели анимации, сделает так чтобы logo стало опускаться.

../../_images/robisplash_anim_editor_play_start.png

Нажмите на кнопку «Автовоспроизведение при Загрузке», чтобы анимация запускалась автоматически при запуске сцены.

../../_images/robisplash_anim_editor_autoplay.png

И, наконец, при запуске сцены анимация должна выглядеть следующим образом:

../../_images/out.gif