animation-vocabulary

Animation Vocabulary

將動作或效果的模糊描述轉換為精確術語，讓使用者知道該怎麼稱呼。

快速開始

使用者描述一個效果。你以以下格式回傳相符的術語：

**Stagger** — 將多個項目依序動畫化，每個之間有短暫延遲，形成串聯效果。

如果有多個術語可能符合，先列出最匹配的，然後 1–2 個替代選項，並用一行說明它們的差異。

指示

1. 閱讀意圖而非關鍵字。 使用者描述他們看到或感覺到的（「有彈性」、「滑出去」、「自己畫出來」），而非技術名稱。將感覺對應到下方的詞彙表。
2. 逐字引用詞彙表。 其描述具有權威性 — 直接使用，不要改寫。
3. 區分相近術語。 當兩個術語競爭時（Clip-path vs Mask、Pop in vs Bounce、Shared element transition vs Layout animation），對比它們以便使用者選擇。
4. 當沒有完全匹配時， 命名最接近的術語並明確說明這是近似值，或用詞彙表的詞彙描述效果（例如「那是 scale-in 入場的 stagger」）。
5. 僅限於此詞彙表。 如果某個術語真的不在這裡，請直接說明，而不是發明一個 — 但你可以用這些詞彙解釋概念。
6. 保持簡潔。 命名問題只需要一個名稱，而不是一篇論文。先給出術語；只有在被問到時才展開說明。

範例

範例 1 — 基於感覺
使用者：「當彈出視窗似乎從你點擊的按鈕中長出來，而不是從中間長出來，這叫什麼？」
輸出：

**Origin-aware animation** — 元素從其觸發點動畫化，例如彈出視窗從開啟它的按鈕中長出，而不是從其自身中心（CSS 預設）。

範例 2 — 區分
使用者：「一張圖片變成另一張圖片的東西。」
輸出：

**Morph** — 一個形狀平滑地變成另一個形狀，例如動態島。

相近替代：
- **Crossfade** — 如果它們只是在同一位置互相淡入淡出。
- **Shared element transition** — 如果一個元素從一個位置移動並轉換到另一個位置。

範例 3 — 物理感覺
使用者：「那個 iOS 滾動，當你拉太遠時會抵抗並彈回。」
輸出：

**Rubber-banding** — 當你拖曳超過邊界時的抵抗和彈回（iOS 過度滾動的感覺）。

詞彙表

反映專案 /vocabulary 頁面的精選快照；當任一變更時保持兩者同步。

入場與出場 — 元素如何出現和消失

• Fade in / Fade out — 元素透過改變透明度出現或消失。
• Slide in — 元素從螢幕外（左、右、上或下）滑入。
• Scale in — 元素從較小尺寸成長到完整尺寸，通常伴隨淡入。
• Pop in — 元素出現時帶有輕微過衝，像是彈跳到位。
• Reveal — 內容逐漸被揭露，通常透過動畫化 clip-path 或 mask。
• Enter / Exit — 元素被加入或移除螢幕時播放的動畫。

序列與時機 — 協調多個元素或時刻

• Keyframes — 動畫中定義的點（0%、50%、100%），瀏覽器填充之間的空隙。
• Interpolation / Tween — 在起始值和結束值之間生成所有中間幀，使動作連續。
• Stagger — 將多個項目依序動畫化，每個之間有短暫延遲，形成串聯效果。
• Orchestration — 刻意安排多個動畫的時機，使它們感覺像一個協調的動作。
• Delay — 動畫開始前的時間。
• Duration — 動畫持續的時間。
• Fill mode — 元素在動畫開始前或結束後是否保留其第一幀或最後一幀的樣式（例如 forwards）。
• Stepped animation — 分為離散步驟的動畫，例如倒數計時器。

移動與變形 — 改變元素的位置、大小或角度

• Translate — 沿 X 或 Y 軸移動元素。
• Scale — 使元素變大或變小。
• Rotate — 繞一點旋轉元素。
• Skew — 沿 X 或 Y 軸傾斜元素，使其脫離矩形形狀。
• 3D tilt / Flip — 在 3D 空間中旋轉（rotateX / rotateY）以增加深度。
• Perspective — 3D 效果的強度 — 較低的值會誇大深度，像是觀看者更近。
• Transform origin — 縮放或旋轉的錨點。
• Origin-aware animation — 元素從其觸發點動畫化，例如彈出視窗從開啟它的按鈕中長出，而不是從其自身中心（CSS 預設）。

狀態之間的轉換 — 連接一個狀態、視圖或元素到另一個

• Crossfade — 一個元素淡出，另一個在同一位置淡入。
• Continuity transition — 透過視覺連接前後狀態來保持使用者方向的變化。例如，使同一個矩形變大變小。
• Morph — 一個形狀平滑地變成另一個形狀，例如動態島。
• Shared element transition — 元素從一個位置移動並轉換到另一個位置，例如縮圖展開為卡片。
• Layout animation — 當元素的大小或位置改變時，它會動畫到新位置而不是瞬間跳躍。
• Accordion / Collapse — 一個區塊平滑地展開和折疊其高度以顯示或隱藏內容。
• Direction-aware transition — 內容向前滑動一個方向，向後滑動相反方向，使導航有方向感。

滾動 — 與滾動或在視圖之間導航相關的動作

• Scroll reveal — 元素在進入視口時淡入或滑入到位。
• Scroll-driven animation — 進度直接與滾動位置相關的動畫。
• Parallax — 背景和前景在滾動時以不同速度移動，創造深度。
• Page transition — 從一個頁面或路由導航到另一個時播放的動畫。
• View transition — 瀏覽器在兩個狀態或頁面之間變形，連接共享元素。

回饋與互動 — 回應使用者的操作

• Hover effect — 游標移到元素上時的視覺變化。
• Press / Tap feedback — 點擊元素時輕微縮小，使其感覺有實體感。
• Hold to confirm — 當使用者按住按鈕時，進度效果逐漸填滿。
• Drag — 透過拖曳移動元素，通常釋放時有動量。
• Drag to reorder — 拖曳列表中的項目以重新排列，其他項目會移動讓出空間。
• Swipe to dismiss — 將元素拖曳出螢幕以關閉它，例如抽屜或提示。
• Rubber-banding — 當你拖曳超過邊界時的抵抗和彈回（iOS 過度滾動的感覺）。
• Shake / Wiggle — 快速左右抖動，表示錯誤或拒絕輸入。
• Ripple — 從點擊點擴散的圓圈，確認按壓。

緩動 — 速度在動畫中如何變化

• Easing — 動畫加速或減速的速率。
• Ease-out — 開始快，結束慢。大多數 UI 和回應使用者的東西的預設值。
• Ease-in — 開始慢，結束快。通常應避免；可能感覺遲緩。
• Ease-in-out — 慢、快、慢。適合已經在螢幕上從 A 點移動到 B 點的元素。
• Linear — 恆定速度。避免用於 UI；保留給旋轉器或跑馬燈。
• Cubic-bezier — 你定義的自訂緩動曲線，用於精確控制。
• Asymmetric easing — 加速和減速速率不同的曲線。感覺比對稱曲線更有活力。

彈簧動畫 — 基於物理的動作，作為固定持續時間緩動的替代方案

• Spring — 由物理（張力、質量、阻尼）驅動的動作，而非固定持續時間。
• Stiffness / Tension — 彈簧拉向目標的強度。越高感覺越乾脆。
• Damping — 彈簧穩定下來的速度。較低的阻尼意味著更多的彈跳和振盪。
• Mass — 動畫元素的感覺重量。質量越大，動作越慢越遲緩。
• Bounce — 過衝並穩定下來的彈簧，增加趣味性。
• Perceptual duration — 彈簧感覺完成的時間，即使它在底下繼續微調。
• Momentum — 攜帶速度的動作，特別是在拖曳或中斷之後。
• Velocity — 元素移動的速度和方向。彈簧會將速度帶入下一個動畫（如果被中斷），因此被甩動的元素會保持其速度。
• Interruptible animation — 可以在飛行中平滑重定向的動畫，而不是先完成。

循環與環境動作 — 自行運行的動畫

• Marquee — 文字或內容連續循環滾動。
• Loop — 重複的動畫，指定次數或無限次。
• Alternate (yoyo) — 循環向前播放然後反向播放每次迭代，而不是跳回起點。
• Orbit — 一個元素繞著另一個元素連續路徑旋轉。
• Pulse — 溫和的重複縮放或透明度變化以吸引注意。
• Float — 溫和、連續的上下漂移，使靜態元素感覺有生命且失重。
• Idle animation — 元素只是待在那裡等待互動時播放的微妙動作。

潤飾與效果 — 區分好與偉大的小細節

• Blur — 用於柔化元素或掩蓋微小瑕疵的模糊濾鏡。
• Clip-path — 將元素裁剪為形狀，用於揭露、遮罩和之前/之後滑塊。
• Mask — 使用形狀或漸層隱藏或揭露元素的部分 — 類似 clip-path，但有柔軟、可淡化的邊緣。
• Before / after slider — 可拖曳的分隔線，在兩個重疊圖像之間擦拭以進行比較。
• Line drawing — SVG 路徑自行繪製，像是看不見的筆在描繪它。
• Text morph — 文字在變化時逐字元動畫化，吸引對新值的注意。
• Skeleton / Shimmer — 在內容載入時顯示的佔位符，帶有移動的光澤。
• Number ticker — 數字滾動或計數到某個值。
• Tabular numbers — 固定寬度數字，使數字在變化時不會移動。對於計數器、計時器和計數器至關重要。
• Typewriter — 文字一次出現一個字元，像是正在打字。

效能 — 保持動作流暢而非卡頓的因素

• Frame rate (FPS) — 每秒繪製的幀數。60fps 是流暢動作的基準；120fps 用於較新顯示器。
• Jank — 當瀏覽器因無法跟上動畫而掉幀時的可見卡頓。
• Dropped frame — 瀏覽器錯過繪製截止日期的幀，導致動作中出現微小中斷。
• Compositing — 讓 GPU 在其自己的圖層上移動或淡入淡出元素，而無需重新計算佈局或繪製。
• will-change — CSS 提示元素即將動畫化，以便瀏覽器提前將其提升到自己的圖層。
• Layout thrashing — 動畫化 width、height、top 或 left 等屬性，迫使瀏覽器每幀重新計算佈局，導致卡頓。

需要了解的原則 — 指導何時以及如何動畫化的概念

• Purposeful animation — 動作應服務於功能 — 引導、提供回饋、顯示關係 — 而不僅僅是裝飾。
• Anticipation — 在移動前朝相反方向的小幅度預備動作，暗示即將發生的事情。
• Follow-through — 元素的部分在主動作停止後繼續移動並稍微穩定下來，增加重量感。
• Squash & stretch — 在移動時變形元素以傳達重量、速度和靈活性。
• Perceived performance — 正確的動畫使介面感覺更快，即使實際上並非如此。
• Frequency of use — 使用者看到動畫的頻率越高，動畫就應該越短越微妙。
• Spatial consistency — 動畫化使元素在狀態間保持其身份和位置，讓使用者永遠不會失去對事物去向的追蹤。
• Hardware acceleration — 動畫化 transform 和 opacity 讓 GPU 保持動作流暢。
• Reduced motion — 尊重使用者的 prefers-reduced-motion 設定，減少或移除動作。