动画可以帮助强化层次感和空间方向感。本文档介绍了添加动画时应遵循的原则。

原则

起点

  • 动画可以帮助锚定界面元素。例如，菜单可以从打开它的按钮处放大显示。
  • 动画可以帮助营造位置感；例如，侧边栏可以从侧面滑入，暗示它一直隐藏在屏幕之外。
  • 设计动画时，要像处理真实世界的材料一样。想象你的界面元素是由真实材料制成的——当它们不在屏幕上显示时，它们在哪里？使用动画来帮助表达这一点。

速度

  • 动画绝不应阻碍用户交互。动画应该快速，几乎总是在 0.2 秒内完成。
  • 用户不应为了能够交互而必须等待动画完成。
  • 动画应具有良好的性能。尽可能使用 transform CSS 属性，这些属性会在 GPU 上渲染元素，使其更加流畅。
  • 如果动画无法做到既快速又高性能，就不要使用它。

简洁

  • 如果材质不是橡胶做的，就不要弹跳。
  • 不要旋转、折叠或沿曲线路径做动画。保持简洁。

一致性

要创建一致的动画，我们必须为元素在动画过程中的行为建立物理规则。当所有动画都遵循这些规则时，它们会显得一致、相互关联且可预测。动画应符合用户的期望，如果不符合，它可能就不是适合这项任务的正确动画。

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

无障碍注意事项

  • 动画应该微妙。要注意存在由运动引发的前庭障碍的用户。
  • 不要对当前正在向自适应技术报告内容的元素（例如正在接收更新的 aria-live 区域）进行动画处理。这可能会导致混乱，因为该技术会尝试解析一个正在不断变化的区域。
  • 避免使用并非由用户行为直接触发的动画。
  • 只要有可能，请确保动画遵循操作系统级别的“减弱动态效果”设置。这可以通过使用 prefers-reduced-motion 媒体查询来实现。在样式表中，将 animation 和 transition 规则放在 @media not (prefers-reduced-motion) 内，或者在使用 React 时使用 @wordpress/compose 中的 useReducedMotion 钩子。

复用动画清单

通用的 Animate 组件用于为界面的不同部分添加动画效果。有关可用动画的更多详情，请参阅组件文档。