动态设计和界面动画

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，并且不会干扰接口的速度和清晰度。