title: "动画" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - User Interface - Explanations - Repos

动画

动画能够强化层级感和空间方位感。本文档将阐述添加动画时应遵循的原则。

基本原则

起始点

• 动画有助于锚定界面元素。例如，菜单可以从触发按钮的位置缩放展开。
• 动画有助于营造空间感；例如，侧边栏可以从侧面滑入，暗示其始终隐藏在屏幕之外。
• 设计动画时，应假设你在处理真实世界的材料。想象你的界面元素由真实材料制成——当它们不在屏幕上时，它们在哪里？利用动画来表达这一点。

速度

• 动画绝不应阻碍用户交互。它们应该快速，几乎总是在 0.2 秒内完成。
• 用户不应为了交互而等待动画结束。
• 动画应具备高性能。尽可能使用 CSS 的 transform 属性，这些属性在 GPU 上渲染元素，使其更流畅。
• 如果某个动画无法做到快速且高性能，则应舍弃。

简洁

• 如果材料不是橡胶制成的，就不要让它弹跳。
• 不要旋转、折叠或沿曲线路径运动。保持简洁。

一致性

为了创建一致的动画，我们必须为元素在动画中的行为建立物理规则。当所有动画都遵循这些规则时，它们会感觉一致、相关且可预测。动画应符合用户的期望，否则可能不适合当前场景。

如果已有适用于你任务的动画，请复用它们。

无障碍性考量

• 动画应保持微妙。注意那些可能因运动而引发前庭功能障碍的用户。
• 不要对当前正在向辅助技术报告内容的元素进行动画处理（例如，正在接收更新的 aria-live 区域）。这可能导致辅助技术尝试解析正在动态变化的区域，从而引发混淆。
• 避免非由用户行为直接触发的动画。
• 尽可能确保动画遵循操作系统级别的“减少动画”设置。这可以通过使用 prefers-reduced-motion 媒体查询来实现。Gutenberg 为此包含了一个 @reduce-motion 混合宏，应与包含 CSS animate 属性的规则一起使用。

复用动画清单

通用的 Animate 组件用于对界面的不同部分进行动画处理。有关可用动画的更多详细信息，请参阅组件文档。