40 lines
2.1 KiB
Markdown
40 lines
2.1 KiB
Markdown
|
# 动画设计
|
|||
|
|
|
|||
|
|
动画能够有效强化界面层级感和空间方位感。本文档将阐述添加动画时应遵循的设计原则。
|
|||
|
|
|
|||
|
|
## 核心原则
|
|||
|
|
|
|||
|
|
### 起始原点
|
|||
|
|
|
|||
|
|
- 动画可锚定界面元素，例如菜单可从触发按钮位置缩放展开
|
|||
|
|
- 动画可构建空间感知，例如侧边栏从屏幕边缘滑入，暗示其始终隐藏于屏幕之外
|
|||
|
|
- 设计动画时需遵循真实物理规律。想象界面元素由实体材料构成——当它们不在屏幕上时位于何处？用动画来呈现这种空间关系
|
|||
|
|
|
|||
|
|
### 响应速度
|
|||
|
|
|
|||
|
|
- 动画绝不应阻碍用户交互，必须保持快速响应，通常在0.2秒内完成
|
|||
|
|
- 用户无需等待动画完成即可进行交互操作
|
|||
|
|
- 确保动画性能优化。优先使用CSS `transform`属性，通过GPU渲染实现流畅效果
|
|||
|
|
- 若无法实现快速高性能的动画效果，宁可不使用动画
|
|||
|
|
|
|||
|
|
### 简洁克制
|
|||
|
|
|
|||
|
|
- 非弹性材料不做弹跳动画
|
|||
|
|
- 避免旋转、折叠或曲线路径动画，保持简洁直观
|
|||
|
|
|
|||
|
|
### 统一规范
|
|||
|
|
|
|||
|
|
建立统一的动画物理规则，使所有元素的动效保持协调一致、符合预期。动画应当匹配用户心理预期，否则可能不适配当前场景。
|
|||
|
|
|
|||
|
|
若已有现成动画效果，请直接复用。
|
|||
|
|
|
|||
|
|
## 无障碍考量
|
|||
|
|
|
|||
|
|
- 动画需保持克制，注意可能引发前庭功能障碍用户不适的情况（详见[运动触发前庭障碍研究](https://www.ncbi.nlm.nih.gov/pubmed/29017000)）
|
|||
|
|
- 避免对正在向辅助技术报告内容的区域（如正在接收更新的`aria-live`区域）添加动画，这可能导致技术解析动态变化区域时产生混乱
|
|||
|
|
- 杜绝非用户直接触发的动画
|
|||
|
|
- 确保动画遵循操作系统层级的"减弱动态效果"设置，可通过[`prefers-reduced-motion`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion)媒体查询实现。Gutenberg提供`@reduce-motion`混合宏，需与含CSS`animate`属性的规则配合使用
|
|||
|
|
|
|||
|
|
## 复用动画库
|
|||
|
|
|
|||
|
|
通用`Animate`组件用于驱动界面各区域的动画效果。具体可用动画请参阅[组件文档](/packages/components/src/animate/README.md)。
|