動態設計和界面動畫

1）為什麼在產品中的動畫

• 解釋因果關系（元素從何處消失），
• 將註意力集中在主要行動上，
• 確認結果（反饋）並減少認知負荷,
• 使過渡變得可預測和「有形」。

規則1： 含義>風格。任何動畫都回答了一個問題："發生了什麼，這與我有什麼關系？».

2）基本原則

1.運動層次結構：首先移動容器,然後是內容,然後是零件。
2.恒定性：相同操作的相同模式。
3.節省：最低屬性、最低幀數；更短、更清晰。
4.現實物理學：開始加速度，結束減速；缺少「沖刺」。
5.可逆性：「向後」感覺像「向前」。
6.可用性：尊重降低動畫的系統設置。

3）持續時間和曲線（建議）

3.1個持續時間（桌面/移動）

Hover： 120-180毫秒

Focus/Pressed: 80–120 мс

Tooltip/Toast： 入口180-240毫秒,出口120-160毫秒

Modalky/Drowers： 200-320毫秒

屏幕過渡： 240-360 ms

滾動參考/視差： 每段≤ 200毫秒,避免無窮循環

3.2曲線

主要： 'cubic-bezier （0.2, 0.0, 0.2、1）'-自然「物質」節奏

輸入更快，輸出更柔和： 'cubic-bezier（0。05, 0.7, 0.1, 1)`

彈性（很少，重音）： 'cubic-bezier（0。2, 0.8, 0.2, 1.2）"overshoot限制≤ 8px/8°

規則：不要同時使用線性插值來移動和操作-感覺「機械性」。

4）過渡編舞

外觀：輕量級0。98→1.0+fade-in,在發生軸上偏移8-16 px。
失蹤：反向順序，入境速度更快（− 20-30％）。
翻頁/更改選項卡：一般的「底座」（容器）移至16-24 px；活動選項卡在開始移動之前突出顯示。
清單：松開級聯（stagger 20-40 ms/元素,不超過6-8元素）。

5）微互動（模式）

按鈕（hover/press）：陰影+輕量級/scale 0。98;壓力反彈≤ 80毫秒。
焦點：無斑點的對比戒指；動畫厚度/透明度而不是光澤。
Inputs：馬車/現場照明到焦點；錯誤-搖動≤ 6 px，≤ 140毫秒，1個周期。
Toggle/Checkbox：狙擊到最終位置，點擊延遲不超過60-80毫秒。
骨架/裝載：shimmer 1200-1600 ms,亮度幅度≤ 20%,沒有突然閃爍。

6）內容狀態

Loading → Success/Empty/Error：一個運動的「通道」；不要混淆不同的方向。
Toast/Alerts：從事件源的側面飛來（例如,用戶操作的右下角）。
拉到緩解：拉伸與彈性解凍；返回時間≤ 250毫秒。

7）可用性（A11y）和安全

支持「prefers-reduced-motion： reduce」：用1%或靜態過渡替換≤ fade/scale上的移動。
避免閃爍>每秒3和較大的對比度閃爍（光敏性癲癇病）。
不要在具有抽吸歷史的用戶中使用強視差/變焦；執行禁用選項。
焦點樣式總是可以在沒有動畫的情況下看到（不僅僅是顏色/移動）。

8）性能（60 FPS作為目標）

僅對opacity和transform （翻譯/scale/rotate）；避免「top/left/width/height」。
包括合成：「轉換形式：translateZ （0）」或「will-change： transform, opacity」（中等）。
最小化repaint：不要在多個元素上用大斑點和濾鏡來動畫陰影。
在蹦床上打破大十字路口；使用requestAnimationFrame。
對於列表-虛擬化/屏幕外重排。

9）設計系統中的運動令牌

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10）實現（CSS/JS/React）

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

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

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

Lottie/SVG：用於說明性空白狀態和滑板；不適用於關鍵控制。優化和緩存。

11）下載模式

Skeleton代替已知內容結構的微調器。
進度：確定性酒吧，如果已知進度；是獨立的-節奏均勻，沒有「沖刺」。
在重建時避免「浮動」skeleton-固定尺寸。

12）頁面/屏幕之間的過渡

保持註意點（共享元素轉換）-卡片在細節中「顯示」。
「深入」導航向前/向右/向上，「向後」向後航行；一個平臺的方向。
背景基板在覆蓋時會變暗多達40-60％。

13） iGaming的細節

Spin/Reveal：一次短時加速（≤ 200毫秒）+均勻旋轉+軟衰減；禁止無休止的循環。
Win/Jackpot：500毫秒≤無頻率；低音量的聲音回音；chitabelen勝利文本（對比度AAA）。
比賽/評分：帳戶的嵌入是一個計數器，具有表格數字和40-60毫秒/單位（蹦床）的輕松音高，沒有「跳躍」布局。
負責任的遊戲：無幹擾效果的通知和限制；動畫最少，強調可讀性。

14）反模式

在點擊響應之前延遲>120毫秒。
opacity+scale 0中的「電梯」。9→1.05→1.每個小事都有0個overshoot。
背景視差與滾動沖突。
無限閃爍/脈動。
在多個元素上動畫layout/paint屬性（「height」，「left」，「filter： blur（）」）。
相同動作的非恒定曲線和持續時間。

15）流程和QA

• 帶有計時/曲線的原型；框架級別的編舞。
• 運動令牌目錄和組件示例。

• 單位可見性/狀態測試（過渡按預期完成）。
• 視覺測試（動畫結尾的快照）。
• 在最大負載的場景中進行分析（性能/時間線）。

• 支持「prefers-reduced-motion」。
• 僅轉換為/opacity。
• 持續時間和曲線對應於令牌。
• 沒有閃光>3/秒和強頻閃。
• Skeleton在可能的情況下代替旋轉器。
• 過渡是可逆且可預測的。

16）設計系統中的文檔

「運動令牌」：duration/easing/stagger和示例。
「過渡模式」：調制解調器，列表，選項卡，頁面。
「A11y與表演」：重整運動和合成海德。
「Do/Do n't」：帶有成功/失敗示例的短片。

簡短摘要

運動設計是原因和後果的語言。保持時間短，曲線一致，屬性便宜渲染。尊重可用性,記錄令牌並檢查性能。然後，動畫將增強UX，並且不會幹擾接口的速度和清晰度。