跳到主要内容
ZH

13 个图标 · interaction="hover-loop"

悬停循环动态图标

这些图标在指针停留期间循环播放，移开后会播完当前一轮再停下，因此不会在动作中途戛然而止。适合值得多看一眼的链接，主要是社交和社区图标。

全部悬停循环图标

交互表现

悬停期间循环播放，在 mouseleave 后播完当前一轮；当用户偏好减少动态效果时保持静止。

当用户偏好减少动态效果时，图标在悬停时保持静止。在触摸屏上轻触不会触发悬停动画；图标位于可聚焦元素内时，键盘聚焦也会触发动画。React 组件会处理好这一切，您只需挑选图标。

适用场景

  • 页眉和页脚中的社交媒体链接
  • 社区和聊天群组的邀请按钮
  • 作品集和个人主页链接
  • 语言和地区选择器

按类别

在 React 中使用

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

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

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

使用 render 属性，让整个链接（包括键盘聚焦）都能触发循环。用 speed 调整节奏：

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

<UseAnimations
  animation={github}
  speed={1.5}
  render={(eventProps, animationProps) => (
    <a href="https://github.com/useAnimations" aria-label="GitHub" {...eventProps}>
      <span {...animationProps} />
    </a>
  )}
/>

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

常见问题

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

共 13 个图标：Flag、Cloud、Globe、Behance、Codepen、Discord、Dribbble、Facebook、Github、Linkedin、Pocket、Telegram 和 Twitter。悬停循环图标通常用于社交链接、社区邀请、作品集链接和语言选择器。

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

当用户偏好减少动态效果时，图标在悬停时保持静止。React 组件会读取 prefers-reduced-motion，并在该设置变化时自动更新，您无需为此编写任何代码。

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

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