Анімації

Вступ

Анімаційна система Godot надзвичайно потужна та гнучка.

Для початку скористаємося сценою з попереднього уроку (Вікно привітання). Задача полягає в тому, щоб до зображення привітання додати анімацію "зникнення". Ось копія, про всяк випадок:robisplash.zip.

Add an animation player

First of all, add an AnimationPlayer node to the scene as a child of "background" (the root node):

../../_images/robisplash_anim_inspector.png

При виборі вузлів такого типу з'являється панель редактора анімації:

../../_images/robisplash_anim_editor.png

Панель редактора анімації залишається видимою, поки її не заховати вручну.

Створення анімації

Настав час створити нову анімацію! Натисніть кнопку Анімація, а потім виберіть у меню Новий. Назвіть анімацію "intro" ("вступ"), коли з'явиться діалогове вікно.

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

Тепер, коли у нас є анімація, редактор властивостей переходить у режим «редагування анімації». У цьому режимі, поруч із кожною властивістю редактора властивостей, з’являється значок ключа. У Godot будь-яка властивість об'єкта може бути анімована:

../../_images/robisplash_anim_property_keys.png

Редагування анімації

The logo will appear from the top of the screen.

Відкривши панель редактора анімації, виберіть вузол "logo" і встановіть властивість "Rect / Position" на (118, -400), натисніть ключ поруч із властивістю, щоб додати ключовий кадр:

../../_images/robisplash_anim_logo_inspector_key.png

When the dialog appears, confirm that you are creating a new track.

The keyframe will be added in the animation player editor:

../../_images/robisplash_anim_editor_keyframe.png

Перемістіть курсор редактора вперед, натиснувши тут:

../../_images/robisplash_anim_editor_track_cursor.png

Змініть положення логотипу на (118, 0) і знову додайте ключовий кадр. З двома ключовими кадрами з різними значеннями відбувається анімація.

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

Натисніть кнопку "Автовідтворення при завантаженні", щоб анімація відтворювалася автоматично при старті сцени.

../../_images/robisplash_anim_editor_autoplay.png

And finally, when running the scene, the animation should look like this:

../../_images/out.gif