跳到主要内容
ZH

144 个图标 · interaction="hover-replay"

悬停播放动态图标

这些图标在指针移入时播放一次并自然结束，即使快速划过工具栏也不会产生抖动。整套图标大多采用这种方式：箭头、文件、设备、天气和品牌图标，悬停时都会动起来。

全部悬停重播图标

交互表现

在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。

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

适用场景

  • 功能列表和价格表
  • 箭头链接和行动号召按钮
  • 编辑器和仪表盘中的工具栏按钮
  • 落地页网格中的卡片
  • 页脚和联系方式链接

按类别

  • 导航与箭头 · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • 操作按钮 · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • 文件、文件夹与用户 · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • 媒体播放 · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • 文本编辑 · 2

    Hash, List

  • 通讯 · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • 设备 · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • 天气 · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • 地图与位置 · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • 电子商务 · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • 图表 · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • 开发者 · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • 设计与布局 · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • 形状与数学 · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • 社交媒体 · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • 其他 · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

在 React 中使用

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

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

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

让整张卡片或整个链接响应悬停，而不只是图标本身：使用 render 属性时，事件会绑定到您的元素上，键盘聚焦同样会播放动画。

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> 每周增长
    </a>
  )}
/>

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

常见问题

哪些图标使用“悬停重播”交互？

共 144 个图标：Arrow Down Left、Arrow Down Right、Arrow Left、Arrow Right、Arrow Up Left、Arrow Up Right、Chevron Down、Chevron Up、Chevrons Down、Chevrons Left、Chevrons Right、Chevrons Up、Corner Down Left、Corner Down Right、Corner Left Down 等另外 129 个。悬停播放图标通常用来点缀箭头链接、功能列表、工具栏按钮和落地页卡片。

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

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

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

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