37 个图标 · interaction="click-toggle"

点击切换动态图标

每次点击都会以动画切换到另一种状态并停在那里，因此这类图标正好充当开关控件的视觉部分。图标始终显示当前状态，配合 aria-pressed 或 checked 属性，按钮的含义就不言自明。

交互表现

点击时在两种状态之间切换；当用户偏好减少动态效果时，直接切换到新状态。

当用户偏好减少动态效果时，点击会直接切换到另一种状态，省去中间的动画。React 组件会处理好这一切，您只需挑选图标。

适用场景

静音和取消静音按钮
显示和隐藏密码的输入框
汉堡菜单和关闭按钮
播放和暂停控件
点赞、星标和收藏开关
复选框、单选按钮和开关

按类别

通知铃铛 · 2
Notification, Notification V2
导航与箭头 · 4
Burger Menu, Menu V2, Menu V3, Menu V4
操作按钮 · 14
Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3
表单控件 · 3
Checkbox, Radio button, Toggle
媒体播放 · 10
Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume
通讯 · 1
Phone Off
设备 · 1
Wifi Off
天气 · 2
Cloud Off, Zap Off

在 React 中使用

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

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

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

点击会自动切换图标。如果要与您的状态保持同步，请传入 active：每当 active 变化时图标都会播放动画，点击也不会再自行切换它。

import { useState } from 'react';
import menu from 'react-useanimations/lib/menu';

export function MenuButton() {
  const [open, setOpen] = useState(false);
  return (
    <UseAnimations
      animation={menu}
      active={open} // true 表示显示结束状态
      onClick={() => setOpen(!open)}
      aria-label={open ? '关闭菜单' : '打开菜单'}
    />
  );
}

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

常见问题

哪些图标使用“点击切换”交互？

共 37 个图标：Notification、Notification V2、Burger Menu、Menu V2、Menu V3、Menu V4、Bookmark、Heart、Lock / Unlock、Maxi/Minimize、Maxi/Minimize V2、Plus/X、Search/X、Settings V2、Shield Off 等另外 22 个。点击切换图标通常用于静音/取消静音、显示/隐藏密码、菜单/关闭、播放/暂停和点赞按钮。

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

当用户偏好减少动态效果时，点击会直接切换到另一种状态，省去中间的动画。React 组件会读取 prefers-reduced-motion，并在该设置变化时自动更新，您无需为此编写任何代码。

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

每个图标默认播放为它设计的交互。给其他任意图标传入 interaction="click-toggle"，就能让它获得这种效果；传入其他值（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）则可换成别的交互。autoplay、loop 和 speed 属性用于调整播放方式。如果要自己控制状态，请传入 active={isOn} 并在 onClick 中更新它：这样点击就不会再自动切换图标。

全部点击切换图标

交互表现

适用场景

按类别

在 React 中使用

常见问题