64 个图标 · interaction="click-replay"

点击重播动态图标

这些图标每次被点击都会从头播放一次，作为操作已经完成的小小确认。适合不会留下状态的一次性操作：发送、保存、刷新、下载、打印或删除。

交互表现

每次点击都从头播放一次，除非用户偏好减少动态效果。

当用户偏好减少动态效果时，点击仍会触发您的事件处理函数，但不会播放动画。React 组件会处理好这一切，您只需挑选图标。

适用场景

聊天和评论表单中的发送按钮
保存、下载和上传按钮
刷新和旋转按钮
加入购物车按钮
编辑器中的文本格式按钮

按类别

警告提示 · 1
X Octagon
导航与箭头 · 6
Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out
操作按钮 · 30
Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square
文件、文件夹与用户 · 5
File Minus, File Plus, Folder Minus, Folder Plus, User Check
媒体播放 · 6
Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle
文本编辑 · 8
Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline
通讯 · 3
Phone, Phone Call, Send
设备 · 1
Printer
电子商务 · 1
Shopping Cart
设计与布局 · 3
Crop, Mouse Pointer, Scissors

在 React 中使用

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

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

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

用 render 属性把图标放进真正的按钮里，这样它就能获得焦点并被屏幕阅读器读出。您的 onClick 会先执行；调用 event.preventDefault() 即可跳过动画。

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

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="下载" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

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

常见问题

哪些图标使用“点击重播”交互？

共 64 个图标：X Octagon、Arrow down circle、Arrow left circle、Arrow right circle、Arrow up circle、Log In、Log Out、Check、Check Circle、Chevron left、Chevron right、Delete、Download、Download Cloud、Download V2 等另外 49 个。点击重播图标通常用来确认发送、保存、刷新、下载、加入购物车和格式设置等操作。

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

当用户偏好减少动态效果时，点击仍会触发您的事件处理函数，但不会播放动画。React 组件会读取 prefers-reduced-motion，并在该设置变化时自动更新，您无需为此编写任何代码。

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

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

全部点击重播图标

交互表现

适用场景

按类别

在 React 中使用

常见问题