動畫時間和UX感知

1）為什麼計時至關重要

• 即時響應感和對系統的信任；
• 明確原因與調查之間的聯系（資料來源/地點）；
• 長時間的疲勞和舒適；
• 動作的準確性（特別是在移動和高利率）。

規則：計時服務於意義。如果動畫無助於理解「發生了什麼」，則會幹擾。

2）心理物理學和閾值

• ≤ 50毫秒-輸入回聲（打印,點擊效果）；似乎是瞬間的。
• ≤ 100毫秒是第一個通過動作（按下「按下」按鈕）的視覺支架。
• 120-180 ms-hover/focus，「軟」狀態過渡。
• 180-280 ms-調制解調器/面板；被視為「自然」出現。
• 300-500毫秒-細心移動（共享元素），進度「向前邁進」。
💡 700毫秒-「緩慢」風險；僅在帶有含義（例如確認獲勝）時才保留。
• ≈ 1200-1600毫秒-skeleton/shimmer循環；更長的時間-累人。

3）加速曲線（easing）和「重量」

• 標準：'cubic-bezier（0。2, 0, 0.2、1）'是中性的「物質」動力學。
• 加速（pressed）： 'cubic-bezier （0.4,0,1,1）'-快速登錄,短點擊。
• 減速（overlay out）： 'cubic-bezier （0,0,0.2,1）'-軟輸出。
• 強調的口音（很少）：'cubic-bezier（0。2, 0.8, 0.2, 1.2)` с overshoot ≤ 8 px.

重量光學：組件越大（卡片,drower）,持續時間越長（+40-80毫秒至基本）。

4）階段和編舞

1.啟動（10-40 ms）：輕量級/尺度0。98→1是開始的信號。

2.運輸（主要階段）：移動/披露。

3.沈積物（20-60毫秒）：小剎車，陰影/焦點環穩定。

• 清單：20-40 ms/元素，最多6-8個連續元素。
• 形式：無級聯；一切同時出現，以免幹擾輸入。

可逆性：「向後」鏡像「向前」，並且更快15-30％。

5）按互動類型計時器

6）時間感知： 如何在不實際加速的情況下「加速」

Instant affordance：在網絡之前立即更改cursors/pressed風格≤ 100毫秒。
隱藏復雜性：平行加載；在面板打開之前對數據進行背景拉動。
語義錨點：共享的元素和運動方向降低了等待的認知成本。
樂觀更新：UI立刻「準備就緒」,服務器確認或回滾。

7）動畫的疲憊和衛生

避免無休止的脈動；任何循環必須是間歇性的或斷開連接的。
在每個節點上不使用blur/box-shadow進行元素陣列（表，網格）上的微觀效果。
支持「prefers-reduced-motion： reduce」：只留下100毫秒≤ fade或靜態狀態開關。

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8）時間令牌（設計系統）

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

命名：'motion。duration.{role}` и `motion.easing。{role}'是組件引擎和Figma的統一。

9）實現： CSS和Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10）時間組成： 平行vs順序

並行（同步+翻譯）-感覺更快。
序列（首先是容器，然後是內容）-結構更清晰，但時間更長。當顯示層次結構很重要時應用。
避免在一個單元中緊密耦合的元素之間的「步驟」>60毫秒。

11）時間與內容

文字：不要在產品中動畫letter/word-by-word；這是一種營銷技術。
數字/計數器：batchami步驟40-60 ms，不抖動布局（tabular-nums）。
圖解：180-240毫秒系列，hover-highlight ≤ 120毫秒。

12）可用性和感知錯誤

焦點樣式應立即出現。
警告/錯誤-動畫最小（≤ 120毫秒）,如果用戶使用AT（輔助技術）則不搖動。
避免閃爍>3/s和較大的對比度閃爍。

13） iGaming的細節

• Press ≤ 100毫秒；「忙碌」狀態；最終敬酒/指示器-無延遲。
• UI響應時間比確認動畫更重要：確認時間短120-160毫秒。
• Spin/Reveal:

開始≤ 200毫秒，均勻循環，制動300-500毫秒；沒有無限的閃爍。
勝利爆發≤ 500毫秒，沒有頻率；總和文本為AAA。

• Batchami更新（250-1000 ms）；視覺diff ≤ 160毫秒；沒有布局飛躍。
• 在hover/focus上是80-120毫秒的背光反彈，因此不會「閃爍」。

14）反模式

移動的線性曲線（感覺為「機械性」）。
對於簡單的按鈕狀態,持續時間>400毫秒。
數十種元素列表中的100+ms級聯。
動畫中數百個元素上的陰影/斑點。
不一致：在同一產品中具有不同時間的相同動作。
延遲焦點或延遲激活鍵盤。

15） QA支票時間清單

一致性

• 時間和曲線取自令牌，相同的動作相同。

反應

• Press/hover/focus的比例為80-180毫秒。
• 第一個視覺響應≤ 100毫秒。

編舞

• 輸入和輸出是對稱的；登錄速度提高15-30%。
• 級聯不超過8個元素和40毫秒的步驟。

A11y

• 支持「prefers-reduced-motion」；焦點無延遲。
• 無閃爍>3/s。

表演表演

• 僅使用「轉換/操作性」動畫；沒有大規模的陰影。

16）設計系統中的文檔

「Motion Tokens」： duration/easing/stagger+應用圖（button, overlay, tab, list）.

「節奏與Phasing」：級聯和可逆性方案。
「Reduce Motion」：降級規則和示例。
「Do/Do n't」：帶有時間碼和目標度量的短片段（INP/First Feedback）。

簡短摘要

良好的計時是即時響應，易懂的編舞和經濟的曲線。保持微觀狀態的短持續時間，僅在增加意義的地方拉伸，支持重置動作，不要動畫「昂貴」屬性。然後，界面感覺活潑而可靠-尤其是在實時和高風險場景中。