動畫 - Phase 導覽

產品

學習中心

社群

Figma 外掛

動畫

本指南說明 Phase 中可用的核心動畫功能。內容涵蓋如何使用動畫模式、關鍵影格、動畫預設、修剪路徑、動態路徑以及緩動效果，在您的設計中建構互動式和帶有時間軸的視覺行為。

建立動畫回應

若要建立動畫，請先設定一個動作。動作定義了應該發生什麼以及何時發生。在此處深入了解動作。

觸發事件設定完成後，您可以直接在畫布上調整物件(Element)或在屬性面板中編輯屬性來建立回應。若需更精細的控制，請展開簡約動作面板並新增額外的關鍵影格。

完整動作面板／簡約動作面板

當您建立動作時，預設會出現簡約動作面板。這提供了一個簡化的視圖，以便快速進行屬性變更和持續時間調整。若要開啟完整動作面板，請點擊時間軸列左側的展開按鈕。這會顯示完整的時間軸視圖，以便進行詳細的動畫編輯。

在完整動作面板中，您會看到：

一條稱為時間指針的白色垂直線，標示目前時間。您可以拖曳它或在左側欄位中輸入特定時間。
每個動畫物件(Element)和屬性的關鍵影格軌道，以水平巷道顯示。
軌道上的菱形標記，代表屬性發生變更的關鍵影格。

時間軸中的每一層都可以展開，以顯示個別的動畫屬性。這使您能夠在詳細層級上檢查和調整每個動畫的關鍵影格。

從頭開始時，時間軸除了時間指針外將是空的。只有在對物件(Element)的屬性進行變更後，關鍵影格才會出現。

使用時間軸來控制動畫時序、檢查圖層並有效地微調關鍵影格。

若要檢視和使用關鍵影格，請點擊動作欄中的時間軸圖示以開啟時間軸面板。這會展開時間軸並顯示所有相關的動畫軌道。

時間軸面板顯示：

代表目前時間的垂直時間指針。
每個動畫物件(Element)和屬性的關鍵影格軌道。
指示關鍵影格位置的標記。

您可以：

拖曳時間指針以在時間中來回查看。
直接新增或刪除關鍵影格。
展開圖層以檢視特定屬性的動畫。
放大／縮小以進行更精細的控制。

關鍵影格

建立關鍵影格

若要建立關鍵影格，您必須先指定變更應發生的時間點。有兩種方法可以執行此操作：

您可以調整動畫的持續時間以定義其總長度，然後在該時間範圍內套用您的變更。
或者，開啟完整動作面板並將時間指針移至您想要修改屬性的確切時刻。這允許精確的時序和動畫分層。

請記住，持續時間設定決定了動畫總共會執行多久。您在該時間內放置關鍵影格的位置決定了特定變更何時發生。

方法 A：變更屬性

選取一個物件(Element)。
直接在畫布上或在屬性面板中調整其屬性。
系統會在目前時間指針位置自動新增一個關鍵影格。

方法 B：手動新增關鍵影格

將滑鼠懸停在時間軸面板中的特定屬性上。
當菱形圖示出現時，點擊它以在目前時間指針位置插入一個關鍵影格。

調整關鍵影格

建立關鍵影格後，可以透過幾種方式修改它：

拖曳關鍵影格以沿著時間軸移動它，從而改變動畫的時序。
在關鍵影格的時間點變更任何參數，以更新該時間點的動畫。
按下 ⌫ Backspace 或 Delete 鍵以移除關鍵影格。
選取一個關鍵影格，變更到稍後的時間，然後按下 Command ⌘ C 或 Ctrl C 來複製它。

在關鍵影格上按一下右鍵時，Phase 會顯示以下選項：

複製到目前時間： 在目前時間建立一個關鍵影格的副本。只有當時間指針設定在與關鍵影格目前所在時間不同的時間時，複製才會有效果。例如：若要根據 1 秒處的關鍵影格建立新的關鍵影格，請在複製前將時間設定到稍晚一點（例如 1.2 秒）。按下 Command ⌘ D 或 Ctrl D 也會複製關鍵影格。
重設為初始值： 將所選關鍵影格的屬性切換為與關閉動畫模式時的值相同。這對於建立循環動畫很有用。
刪除關鍵影格： 移除關鍵影格。動畫會重新計算，如同該關鍵影格不存在一樣，包括連接被移除關鍵影格兩側的關鍵影格。

在時間軸的右側，點擊關鍵影格即可檢視緩動設定。這些設定可讓您調整動畫的加速度和平滑度。

插補

將關鍵影格想像成設計在特定時刻樣貌的快照。您設定這些關鍵點，Phase 會施展魔法計算出所有中間狀態，這就是我們所說的「插補」。

這裡有一個簡單的動畫。在 0 秒時，沒有關鍵影格。此時使用黃色圓形的預設設計。然後在 1 秒標記處，動畫設定為紅色菱形。動畫也設定為在該點旋轉 180 度。

0 秒	0.5 秒	1 秒

在 0 秒和 1 秒之間，沒有關鍵影格。然而，Phase 會估算每個點之間的邊框位置和填色。因此，觀察 0 秒和 1 秒之間的形狀，它會呈現為某種帶有橘色填色的圓角方形。

動畫預設

動畫預設是一種現成的動畫效果，可以快速套用到我們的物件(Element)上。我們可以從各種預設選項中選擇，例如淡入、移動、縮放、旋轉和修剪，而無需從頭開始建立動畫，這使得新增動畫變得輕鬆省力。

如何套用動畫預設

動畫預設僅在動畫模式下可用。若要套用預設：

選取一個物件(Element)，在屬性面板中點擊「預設」選項。
選擇所需的預設並將其套用到元件上。

動畫預設類型

我們提供 10 種不同的動畫預設，每種預設都為我們的物件(Element)提供獨特的動畫效果：

淡入 (Fade In)： 逐漸使物件可見，從透明過渡到不透明。
淡出 (Fade Out)： 逐漸使物件消失，從不透明過渡到透明。
移入 (Move In)： 使物件從螢幕外位置移入視野中。
移出 (Move Out)： 使物件移出視野，移至螢幕外。
放大進入 (Scale In)： 使物件在變為可見時放大，尺寸從較小或不可見增加到最終尺寸。
縮小退場 (Scale Out)： 使物件在變為不可見時縮小，尺寸減小直到消失。
旋轉進入 (Spin In)： 使物件旋轉進入視野，從螢幕外位置旋轉到最終可見狀態。
旋轉退場 (Spin Out)： 使物件旋轉移出視野，旋轉直到不再可見。
修剪入 (Trim In)： 使路徑在螢幕上自行繪製，逐漸顯示路徑的形狀。
修剪出 (Trim Out)： 使路徑自行擦除，逐漸從視野中移除路徑。

調整動畫預設

調整預設詳細資料

開啟預設詳細資料對話框。

使用延遲設定來設定動畫開始前的時間量。

持續時間

前往時間軸
找到物件軌道區段。
拖曳軌道區段的邊緣以調整動畫預設的持續時間。

修剪路徑

修剪路徑是一種有效的技巧，可以為動態圖形和向量動畫增添更深層次的運動感。它允許我們隨著時間動畫化路徑上描邊的修剪或繪製，從而產生運動或變換的錯覺。這種技巧能夠顯示或隱藏形狀或線條的特定部分，從而產生動態的視覺效果。

建立修剪路徑

繪製應套用修剪路徑效果的形狀。這可以是一個簡單的矩形、圓形或自訂向量路徑。
點擊屬性面板中「效果」旁邊的符號以存取修剪路徑功能。此動作將顯示修剪路徑工具箱。
將時間指針移至所需的起點。通常，這會是 0 秒。
將修剪路徑的起點和終點設定為 100%。
將時間指針移至所需的終點。
將修剪路徑的起點設定為 0%，終點設定為 100%。在修剪值為 0% 時，線條將變得可見。
按下播放鍵。

✍️

注意

在使用修剪路徑動畫（尤其是在複雜動畫或某些形狀中）時，請謹慎使用填色。根據設計或動畫的不同，可能會出現意外的視覺效果。

例如，如果填色未與修剪路徑動畫正確對齊，則可能會發生不希望的顏色變化或形狀外觀不一致的情況。此外，如果修剪路徑動畫涉及擦除路徑，填色可能會與路徑一起被擦除，導致意外的消失效果。

請務必徹底測試任何動畫，以確保填色在整個修剪路徑動畫中的行為符合預期。

預設情況下，形狀的起點為 0%，終點為 100%，但可以調整這些值來變更修剪起點和終點的位置。將兩個點都設定為 100% 將完全修剪路徑，使其在畫布上不可見。另一方面，將兩個點都設定為 0% 將使線條不可見。

偏移

在我們先前的步驟中，我們能夠透過設定偏移和關鍵影格來建立類似 Pac-Man 的動畫。這使我們能夠建立複雜的重複圖案，非常適合像開合動作這樣的動態效果。我們從 20% 的偏移、10% 的起點開始，並將終點保持在 100%。然後，對於每個後續的關鍵影格，我們從 20% 動畫到 100%，重複此序列多次，而不變更偏移值。

對於初學者而言，修剪路徑中的偏移屬性指的是動畫沿路徑開始的點。它允許您控制修剪動畫沿路徑的起始位置。修剪路徑動畫從此偏移點開始，然後隨著動畫的進行沿路徑前進。

將偏移設定為 0% 會使修剪路徑從形狀的開頭開始。簡單來說，路徑的可見部分從形狀的起點開始。增加偏移值會沿路徑移動修剪的起點。因此，如果偏移設定為 50%，修剪將從路徑的中間開始，僅顯示形狀的後半部分。

修剪路徑模式

修剪路徑模式是一些選項或設定，用於控制修剪路徑動畫在隨時間顯示或擦除路徑時的行為。這些模式決定了動畫進程中起點和終點的變化方式。若要套用修剪路徑，請將所有形狀分組到一個容器中，然後將修剪路徑套用到該容器。若要在模式之間切換，請使用下拉式選單。

主要有兩種修剪路徑模式：

同時

在此模式下，修剪路徑動畫的起點和終點會沿路徑一起移動。隨著動畫的推進，路徑的可見部分的起點和終點都會在不同的位置，從而產生同步的顯示或擦除效果。當我們希望動畫以相同的速率均勻地揭開或擦除整個路徑時，會使用此模式。

個別

在此模式下，我們可以分別控制修剪路徑動畫的起點和終點。隨著動畫的進程，我們可以獨立調整路徑的起點和終點。這為我們如何顯示或擦除路徑提供了更大的靈活性和創造力。我們可以建立諸如從一側到另一側繪製路徑或以獨特模式擦除路徑等效果。

動態路徑

動態路徑定義了物件(Element)在動畫中遵循的軌跡。它們可以是直線、曲線或自訂形狀，對於建立動態、視覺上引人入勝的動態圖形至關重要。

主要元件

動態路徑初始點：物件移動的起點。
動態路徑點：沿路徑的關鍵點。
動態路徑曲線控制：調整點之間的曲率。
動態路徑區段：兩個動態路徑點之間的空間。

建立動態路徑

在時間軸上移動時間指針以設定初始位置。
選取並重新定位物件以產生動態路徑。
位置關鍵影格會自動包含 x 和 y 值。

使動態路徑彎曲

選取路徑點以顯示形狀選項：
- 直線：無曲線，銳角。
- 鏡像：具有相等控制點的對稱曲線。
- 不對稱：不等控制點，用於產生多樣的曲線。
- 獨立：完全獨立控制兩個控制點。
使用曲線控制點調整路徑曲線。

定向

使用 自動定向 使物件(Element)的方向與動態路徑對齊。

時序、持續時間和緩動

時間：使用關鍵影格逐段調整速度。
持續時間：路徑可以超出時間軸持續時間，但多餘的移動不會成像。
緩動：可以套用到個別路徑區段以獲得更平滑的運動。

範例：彈跳球

使用擠壓和拉伸技巧以增加真實感。
球的重量會影響彈跳速度和高度。
使用曲線調整來微調彈跳動態。

緩動

緩動控制動畫如何在關鍵影格之間過渡，影響其平滑度、速度和風格。Phase 支援各種預設緩動類型和可自訂的貝茲曲線，以協助設計師微調運動行為。

如何使用緩動

選取一個關鍵影格。
開啟屬性面板底部的 緩動環境選單。
選擇一個預設或手動編輯曲線控制點以建立自訂緩動。

緩動面板功能

視覺化曲線編輯器：讓您直接操作曲線控制點。
類型選單：提供如 漸入、漸出 等預設。
自訂模式：當手動調整控制點時觸發。
貝茲座標：[Bx, By, Tx, Ty] 顯示，可編輯以求精確。

曲線格點

具有兩個可調式控制軸的圖形介面。
較長的控制軸 = 更戲劇性的緩動。
較短的控制軸 = 更細微的緩動。

預設緩動類型

基本緩動

階梯式 (Step)：立即跳到下一個關鍵影格值。
線性 (Linear)：等速；無加速／減速。
漸入 (Ease In)：開始慢，結束快。
漸出 (Ease Out)：開始快，結束慢。
漸入漸出 (Ease In Out)：平滑的開始和結束。

回彈緩動

漸入回彈／漸出回彈／漸入漸出回彈 (Ease In Back / Out Back / In Out Back)：在開始／結束／兩者皆是時增加刻意的超越，產生「反彈」的感覺。

彈性與彈跳

漸入／漸出彈性 (Ease In/Out Elastic)：彈性的運動，會超越然後穩定下來。
漸入／漸出彈跳 (Ease In/Out Bounce)：模擬受重力影響的彈跳。

跳躍緩動

跳躍進入／跳躍退出／跳躍進出 (Hop In / Out / In Out)：增加彈跳感，用於活潑生動的進入或退出。

理解貝茲曲線

每個緩動曲線都基於貝茲數學，由附加到關鍵影格的控制軸控制。
起點和終點固定在 (0,0) 和 (1,1)。
控制軸控制曲率，x 值鎖定在 0–1 之間，y 值可以超出以產生極端效果。
較高的值 = 較強的曲線彎曲度，但效果遞減。

動畫