動畫詞彙：把 91 種動效，變成一套可即時試玩的共同語言
「我想要那種……彈一下、再慢慢停下來的感覺。」每個做產品的人都試過用一堆形容詞去描述動畫，然後對方一臉茫然。動態很難用文字講清楚——同一個「彈跳」，十個人腦海裡可能是十種曲線。
動畫詞彙 是一個互動式的動效詞彙表：它把 91 種常見的動畫模式整理成 12 大分類，每一種都配上一個可以即時試玩的示範。你不只是讀定義，而是親手拉動參數、看它如何運動、再翻開背後的程式碼。它的目標很簡單——讓你、設計師同工程師，都用同一套名稱去描述動態，省下一來一回的猜謎。
為什麼動態需要一套詞彙？
在真實的產品開發裡，「動畫」往往是最難溝通的一環：
- 形容詞不可靠：「快一點」「順一點」「Q 一點」人人理解不同，來回改十次都對不準。
- 設計與工程之間有語言落差：設計師講感覺，工程師要的是緩動曲線、時間、位移這些可實作的參數。
- 改稿成本高：一句「再順一點、再 Q 一點」，設計師可能改三四版都不是你要的——能指著示範講「就要這種：錯開 0.08 秒、緩出、0.5 秒」，一次就對得準。
設計理念：每個詞，都能即時試玩
動畫詞彙的核心不是一本字典，而是一座可以動手玩的實驗室。每一個模式都不只給你一句定義，而是讓你即場感受、即場調整。
三種視角：實際應用、抽象示範、程式碼
每張卡片都提供三個切換視角，幫你由「感覺」一路理解到「實作」：「實際應用」用真實的 UI 場景（通知、清單、登入表單）呈現這個動效在產品裡長什麼樣；「抽象示範」把動態抽離成最純粹的幾何運動，讓你看清楚運動本身；「程式碼」則直接攤開背後可複製的實作。把游標移到任一卡片即可循環重播，點擊示範內容更可直接互動。
以「排序與時間」為例，你可以即時調整「項目數」「錯開間隔」「持續時間」三條滑桿，眼看著一列通知由雜亂變成行雲流水的串接登場——0.08 秒的錯開間隔，往往就是「高級感」與「廉價感」之間的差別，而你能親手感受到它。
12 大分類，91 種模式
動畫詞彙把動效拆成一條由「元素如何出現」到「如何保持流暢」的完整光譜：
- 01 進場與退場——元素如何出現與消失（淡入、滑入）。
- 02 排序與時間——錯開、編排、延遲、持續時間。
- 03 移動與變形——位移、縮放、旋轉、形變。
- 04 狀態間的轉場——在不同狀態之間平滑過渡。
- 05 捲動——隨捲動觸發或驅動的動態。
- 06 回饋與互動——拖曳排序、滑動關閉、橡皮筋效果、搖晃提示。
- 07 緩動——緩入、緩入緩出、線性、三次貝茲曲線。
- 08 彈簧動畫——以物理彈簧驅動的自然運動。
- 09 循環與環境動態——持續、環境式的背景動態。
- 10 精修與特效——畫龍點睛的細節與特效。
- 11 效能——讓動態保持流暢、不卡頓的關鍵。
- 12 必懂原則——貫穿全部示範的核心原則。
這些不是靜態插圖。「回饋與互動」裡的拖曳排序可以真的拖、滑動關閉可以真的滑、密碼錯誤的搖晃就是你在登入頁會遇到的那一下——把抽象的動效名稱，變成指尖上的肌肉記憶。
把緩動講清楚：一條曲線勝過千言萬語
緩動（easing）是最抽象、卻最影響觀感的一環。動畫詞彙把每一種緩動同時用「曲線圖」和「實際運動的小球」呈現：你看到「緩入」起步慢、結束快的曲線，同時看到小球如何照著那條曲線移動——再附上提醒「通常避免使用，可能顯得拖沓」。三次貝茲曲線更可以親手拖動控制點，即時感受 P1、P2 如何改變整段運動的個性。
和設計師、工程師對話的共同語言
這個工具有一個刻意的定位：它是寫給「要把動畫講清楚的人」的——無論你是委託網站、想講明白心目中效果的客戶，是把想法交棒給工程師的設計師，還是接需求的開發者。當你能指著示範說「我要這種：錯開 0.08 秒、緩出、位移 24px」，溝通就由含糊的形容詞，變成大家都看得懂、改得動的具體參數。動畫詞彙就是把這套精準語言，整理成可以隨手指、隨手試的參考。
它甚至把「效能」也納入詞彙：什麼是 60fps、什麼是卡頓（jank）、為什麼用 transform 交給 GPU 合成，會比改 margin-left 觸發重繪流暢得多。懂得這些詞，才寫得出真正順的動畫。
工程細節：流暢、可存取、無 JS 也讀得到
一個講動效的網站，自己的動效更要立得住。我哋在工程上守住幾條原則：
- 效能優先：動畫盡量只動 transform 與 opacity，交由 GPU 合成，維持 60fps。
- 尊重使用者偏好：跟隨 prefers-reduced-motion，需要時自動收斂動態。
- 漸進增強：核心內容在沒有 JavaScript 時仍可閱讀，動畫只是錦上添花。
- 繁體中文／英文雙語：一鍵切換，詞彙與說明同步翻譯。
- 零版面位移（CLS）：示範區塊預留尺寸，載入過程不跳動。
結語
動畫詞彙看似只是一份「動效字典」，背後其實是牧羊人科技對動態設計與前端工程的一次完整示範：91 個可即時互動的示範、12 大分類、雙語、效能與可存取性全部到位。
更重要的是它解決一個真實的問題——把「只可意會」的動態，變成「可以言傳、可以調參、可以指著示範直接溝通」的共同語言。這正是我哋做產品的方式：把複雜的東西，做成人人都用得上的工具。