✍️
注意事項
請注意! Phase 會持續更新和改進功能，因此我們的教學影片可能與目前的軟體介面略有不同。
動畫
利用 Phase中操作簡單卻功能強大的動畫製作工具，為設計注入生命！你只需要進入動畫模式，選好時間軸上的某一點，進行編輯，其它工作就交給 Phase 。
動畫模式
切換到動畫模式
按螢幕下方的 動畫按鈕
或直接按 鍵開始。
或直接按 A
在動畫模式中，動畫游標旁會出現一些圖示：
- 播放 / 暫停
: 控制影片播放。也可使用 空格鍵開始或停止影片播放。Space - 循環播放
: 動畫播放完畢後，將重複播放動畫。 - 播放速度
: 點擊此按鈕可在 x0.25，x0.5，x1.0，x1.25，x1.5 和 x2.0 不同速度間來回選擇。
雖然圖示很重要，但在動畫模式中較大的改變是螢幕下方有時間軸面板。典型的 Phase 動畫工作流程中會大量運用時間軸，以下是基本概述。
時間軸介面
從頭開始製作動畫，時間軸會是空白的，只有一條白色垂直線。這是 時間指針，也是動畫的時間標記。你可用拖曳方式，或在時間軸左上方的欄位中輸入文字，將播放頭移到特定的時間。
另外，匯入 Lottie 檔案時，時間軸上會出現許多菱形。這些是 關鍵影格，也是圖層在動畫進行變化的點位。如果圖層有設定關鍵影格，它會出現在時間軸左側的新圖層面板中。
每個關鍵影格代表每個點位至少有調整一個屬性。每個圖層內嵌入所有已變更的屬性。圖層可以展開，顯示關鍵影格中所有屬性。
✍️
注意事項
如果在 0 秒時沒有出現關鍵影格，表示此時的屬性維持在關閉動畫模式。
製作動畫大部分工作是在設定關鍵影格，所以我們開始吧！
建立關鍵影格
在 Phase 中建立關鍵影格方式與建立靜態設計一樣簡便。唯一不同的是，在做任何變更前，時間指針需要移動到變更應該發生的時間。
方法 A：透過變更屬性建立關鍵影格
自動通過調整元素位置創建關鍵影格
- 將時間指針移動到時間軸上的某一點。
- 選取要進行設計的元件，移動元件或變更任何元件屬性。
- Phase 會自動以新設定建立關鍵影格。
方法 A 與按時間重製方式操作相同，不需要多次點擊，使用上可能比較容易。不過，有時候也需要手動建立關鍵影格。
方法 B：手動新增關鍵影格
通過手動輸入添加關鍵影格
- 將時間指針移動到時間軸上的某一點。
- 將滑鼠移至任何屬性上，會出現一個菱形關鍵影格指示。
- 按一下圖示。
- 即使沒有變更任何屬性，Phase 也會即時建立關鍵影格。
方法 B 對設計動畫延遲播放效果最為實用。舉例來說，如果動畫應該從 0 秒到之後某個時間點保持不變，就可以建立一個關鍵影格，讓該屬性在這段時間內保持不變。即使不是在動畫開頭，也可以作為第一個新的關鍵影格。
關鍵影格調整
對齊關鍵影格
每當我們點擊關鍵影格，播放頭將自動對齊。還有其他方法可供選擇和修改關鍵影格：
- 拖曳關鍵影格沿時間軸移動，改變動畫播放的時間。
- 變更關鍵影格的時間參數，即時更新動畫。
- 按 鍵移除關鍵影格。⌫ Backspace或Delete
- 選取關鍵影格，變更時間為稍後時間點，然後按 或Command ⌘C進行複製。CtrlC
在關鍵影格按一下滑鼠右鍵，Phase 會顯示下列選項：
- 在目前時間點進行複製: 在動畫目前時間點複製關鍵影格。只有時間指針設定為與關鍵影格目前時間點不同，才能進行複製。例如：如果要利用第1秒的關鍵影格建立新的關鍵影格，在進行複製前將時間設定在稍後的時間點（如 第1.2 秒）。按下 或Command ⌘D即可複製關鍵影格。CtrlD
- 重設為起始值: 將所選取關鍵影格的屬性，切換為關閉動畫模式時的值。對於建立循環動畫非常實用。
- 刪除關鍵影格: 刪除關鍵影格。動畫依據該關鍵影格刪除後情況重新計算，包括連接該刪除關鍵影格兩端的關鍵影格。
在時間軸的右側，點擊關鍵影格，即可檢視緩動設定。可以利用緩動設定調整動畫的加速度和流暢度。
插補
插補
製作動畫時，可以在不同的時間間隔設定關鍵影格，以決定動畫在這些時間點的外觀。在每個關鍵影格之間，Phase 會透過插補程序自動計算動畫。
這裡有一個簡單的動畫。在 0 秒時，沒有關鍵影格。這時會使用預設的黃色圓圈設計。然後在第 1 秒時，動畫設定為紅色菱形。動畫設定為在該點旋轉 180 度。
 0 秒時 |  0.5 秒時 |  1 秒時 |
在 0 秒到 1 秒之間，沒有關鍵影格。Phase 會在每個點之間估算邊框位置和填充顏色。因此，在 0 秒到 1 秒之間觀看形狀，它會出現某種圓角正方形，填滿橘色。
📖
進一步了解
Phase 能夠設計精細的插補，進行加速或減速。這個過程稱為緩動，我們已針對這項功能有一篇單獨內容介紹
開始製作動畫
開始使用我們免費的動畫軟體