动画时间和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）。

简短摘要

良好的计时是即时响应，易懂的编舞和经济的曲线。保持微观状态的短持续时间，仅在增加意义的地方拉伸，支持重置动作，不要动画"昂贵"属性。然后，界面感觉活泼而可靠-尤其是在实时和高风险场景中。