动画
目录
动画能够强化层级感和空间方位感。本文档将阐述添加动画时应遵循的原则。
基本原则
起始点
- 动画有助于锚定界面元素。例如，菜单可以从触发按钮的位置缩放展开。
- 动画有助于营造空间感；例如，侧边栏可以从侧面滑入，暗示其始终隐藏在屏幕之外。
- 设计动画时，应假设你在处理真实世界的材料。想象你的界面元素由真实材料制成——当它们不在屏幕上时，它们在哪里？利用动画来表达这一点。
速度
- 动画绝不应阻碍用户交互。它们应该快速，几乎总是在 0.2 秒内完成。
- 用户不应为了交互而等待动画结束。
- 动画应具备高性能。尽可能使用 CSS 的
transform属性，这些属性在 GPU 上渲染元素，使其更流畅。 - 如果某个动画无法做到快速且高性能，则应舍弃。
简洁
- 如果材料不是橡胶制成的，就不要让它弹跳。
- 不要旋转、折叠或沿曲线路径运动。保持简洁。
一致性
为了创建一致的动画，我们必须为元素在动画中的行为建立物理规则。当所有动画都遵循这些规则时，它们会感觉一致、相关且可预测。动画应符合用户的期望，否则可能不适合当前场景。
如果已有适用于你任务的动画，请复用它们。
无障碍性考量
- 动画应保持微妙。注意那些可能因运动而引发前庭功能障碍的用户。
- 不要对当前正在向辅助技术报告内容的元素进行动画处理（例如，正在接收更新的
aria-live区域）。这可能导致辅助技术尝试解析正在动态变化的区域，从而引发混淆。 - 避免非由用户行为直接触发的动画。
- 尽可能确保动画遵循操作系统级别的“减少动画”设置。这可以通过使用
prefers-reduced-motion媒体查询来实现。Gutenberg 为此包含了一个@reduce-motion混合宏，应与包含 CSSanimate属性的规则一起使用。
复用动画清单
通用的 Animate 组件用于对界面的不同部分进行动画处理。有关可用动画的更多详细信息，请参阅组件文档。