动态图标的交互方式

如何选择交互方式

• 持续存在的状态，例如正在加载或仍然有效的警告：循环。
• 开关类控件，例如静音、菜单或显示密码：点击切换，需要受控状态时配合 active 使用。
• 一次性操作，例如发送、保存或刷新：点击重播。
• 提示链接将打开什么：悬停，指针离开时会反向播放。
• 用户会快速扫过的工具栏和列表：悬停重播，播放一次后自然结束。
• 值得多看一眼的链接，例如社交图标：悬停循环。

减少动态效果

React 组件遵循 prefers-reduced-motion，并在该设置变化时随之更新。在触摸屏上轻触永远不会触发悬停动画。

• loop: 图标不会自动播放，停留在静态的第一帧。
• click-toggle: 点击会直接切换到另一种状态，省去中间的动画。
• click-replay: 点击仍会触发您的事件处理函数，但不会播放动画。
• hover: 悬停不会播放动画。
• hover-replay: 悬停不会播放动画。
• hover-loop: 悬停时图标保持静止。