動畫

簡介

Godot 的動畫系統極為強大且靈活。

首先我們要使用前一個教學( 啟動畫面 )的場景。這篇教學的目的是要給啟動畫面加上「淡入」動畫效果。以防萬一,這裡也有一份檔案: robisplash.zip

新增一個動畫播放器

首先,新增一個 AnimationPlayer 節點作為「background」(根節點)的子節點:

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

編輯動畫

Logo 會顯示在螢幕的最上方。

在動畫編輯器開啟的狀態下選擇「logo」節點,並將「Rect / Position」屬性設為 (118, -400) ,然後點擊屬性旁邊的鑰匙按鈕來新增一個關鍵影格:

../../_images/robisplash_anim_logo_inspector_key.png

對話框跳出後,代表正在建立新的軌道。

動畫編輯器中會新增一個關鍵影格:

../../_images/robisplash_anim_editor_keyframe.png

點擊這裡將編輯器的遊標時間往後移動:

../../_images/robisplash_anim_editor_track_cursor.png

將 logo 的位置更改為 (118, 0) 並再新增一個關鍵影格。有了兩個有不同數值的關鍵影格,即可產生動畫。

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