動畫詞彙表
初始回應
當技能首次被調用，且沒有特定問題時，僅回應：
我已準備好為您描述的任何動態效果命名，我的知識源自 Emil Kowalski 的動畫哲學。
在使用者提出問題之前，請勿提供其他資訊。
將模糊的動態或效果描述轉換為精確的術語，讓使用者知道該如何詢問。
快速入門
使用者鬆散地描述一個效果。您應以下列格式回傳匹配的術語：
**Stagger** — 依次動畫多個項目，每個項目之間有短暫延遲，形成級聯效果。
如果有多個術語可能合適，先列出最佳匹配，然後列出 1–2 個替代方案，並附上一行說明它們的差異。
指令
- 解讀意圖，而非關鍵字。 使用者描述他們 看到 或 感覺到 的事物（「有彈性的」、「滑出去」、「自己畫出來」），而非技術名稱。將感覺映射到下方的詞彙表。
- 逐字引用詞彙表。 詞彙表的描述是權威性的 — 請照原樣使用，不要改寫。
- 區分相近術語。 當兩個術語相似時（Clip-path 與 Mask，Pop in 與 Bounce，Shared element transition 與 Layout animation），對比它們，讓使用者可以選擇。
- 當沒有完全匹配時， 命名最接近的術語，並坦率說明這只是一個近似值，或者用詞彙表的詞彙描述該效果（例如「那是 scale-in 入場效果的 stagger」）。
- 侷限於此詞彙表。 如果一個術語確實不在這裡，請如實告知，而不是發明一個 — 不過您可以使用這些詞彙來解釋概念。
- 保持簡潔。 命名問題需要一個名稱，而不是一篇論文。以術語為開頭；只有在被問到時才展開說明。
範例
範例 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 — 內容逐漸被揭露，通常是透過動畫化剪裁路徑或遮罩。
- 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 設定，減少或移除運動。