跳到主要内容
ZH

21 个图标 · interaction="loop"

循环动态图标

这些图标只要在屏幕上就会持续播放，适合表示持续存在的状态：正在加载、警告仍然有效、终端正在等待。当用户偏好减少动态效果时，它们会停在第一帧，看起来就是一个普通图标。

全部循环图标

交互表现

持续播放；当用户偏好减少动态效果时，停留在静态的第一帧。

当用户偏好减少动态效果时，图标不会自动播放，而是停留在静态的第一帧。React 组件会处理好这一切，您只需挑选图标。

适用场景

  • 加载指示器和进度提示
  • 持续中的警告和错误状态
  • 直播和录制指示
  • 首屏区域的向下滚动提示
  • 新通知的提醒标记

按类别

在 React 中使用

这里列出的图标默认使用这种交互。其他图标也可以使用：传入 interaction 属性即可。

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings 默认使用 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

循环图标会自动播放，滚出视口时暂停。可以用 speed 放慢速度，用 loop={false} 只播放一次，或者用 autoplay={false} 让它保持静止：

import infinity from 'react-useanimations/lib/infinity';

<UseAnimations animation={infinity} speed={0.5} />      // 半速播放
<UseAnimations animation={infinity} loop={false} />     // 播放一次后停止
<UseAnimations animation={infinity} autoplay={false} /> // 静止在第一帧

所有属性都在文档中。在 React 之外，这些图标就是 Lottie JSON 文件；Lottie 图标页面介绍了如何用 lottie-web 实现这些交互。

常见问题

哪些图标使用“循环”交互？

共 21 个图标：Alert circle、Alert octagon、Alert triangle、Error、Notification V3、Notification V4、More Horizontal、More Vertical、Checkmark、Help、Airplay、Terminal、Infinity、Loading circular、Loading V2 等另外 6 个。循环图标通常用于加载指示、持续中的警告、摇动的铃铛或向下滚动提示。

用户偏好减少动态效果时会怎样？

当用户偏好减少动态效果时，图标不会自动播放，而是停留在静态的第一帧。React 组件会读取 prefers-reduced-motion，并在该设置变化时自动更新，您无需为此编写任何代码。

如何更改图标的交互方式？

每个图标默认播放为它设计的交互。给其他任意图标传入 interaction="loop"，就能让它获得这种效果；传入其他值（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）则可换成别的交互。autoplay、loop 和 speed 属性用于调整播放方式。