IMouse:iPad Pro 的鼠标指针,用了又用

项目主页:https://github.com/rikumi/imouse

# 介绍

PC(含 Mac)GUI 的世界中,几十年没有改变的设计有两个:一个是窗口,另一个是鼠标指针。传统的鼠标指针设计固然高效,但它经常引起我们的无端思考:为什么是一个箭头?为什么链接的指针是一个手?为什么箭头往左歪?

新 iPad Pro 的触摸板体验(参见这篇文章)让我们眼前一亮,其中就包含了对鼠标指针的重新思考。也许这不是比传统鼠标指针更好的设计,但至少是推翻它的一次大胆尝试。

IMouse 是一个 Web 前端小插件,只需动动手指,就能在你的页面上引入这样的鼠标效果。

# 已实现功能

  • 普通圆形鼠标指针(带毛玻璃效果);
  • 选择文字时变为垂直光标(不支持悬浮在文字上方时变为垂直光标);
  • 悬浮在链接上方时框住链接,支持自定义代表链接的 selector;
  • 按下时缩小变色效果;
  • 指针颜色、大小、动画时长等基本参数定制。

# 已知问题

  • 不支持自动切换深色/浅色光标;
  • 会卡在 iframe 外侧(跨域 iframe 由于浏览器限制无法支持;非跨域 iframe 需要通信,暂不实现);
  • 在较大的链接元素上 hover 体验可能不佳;
  • 在 macOS 端,弹出横幅通知会导致鼠标指针恢复正常箭头显示,这是 macOS 的 Bug。

# 引入方式

  • NPM 引入:
import IMouse from 'imouse';

IMouse.init(options);
  • Script 引入:

首先下载 imouse.js 并下发。

<script src="imouse.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', () => IMouse.default.init(options));
</script>

# 文档

# IMouse.init(options: IMouseProps): IMouse

初始化 IMouse 并指定参数。

属性 类型 默认值 描述
defaultBackgroundColor string 'rgba(30, 111, 255, .1)' 非 hover 默认状态下的光标背景颜色,CSS 格式
activeBackgroundColor string 'rgba(30, 111, 255, .2)' 非 hover 按下状态下的光标背景颜色,CSS 格式
defaultSize number 20 非 hover 默认状态下的光标直径
activeSize number 15 非 hover 按下状态下的光标直径
hoverPadding number 8 hover 状态下的光标 padding 大小
activePadding number 4 hover 按下状态下的光标 padding 大小
hoverRadius number 8 hover 状态下的光标圆角半径
activeRadius number 4 hover 按下状态下的光标圆角半径
selectionWidth number 3 文字选择状态下的光标宽度
selectionHeight number 40 文字选择状态下的光标高度
selectionRadius number 2 文字选择状态下的光标圆角半径
hoverSelector string 'a, button,
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="submit"]'
允许 hover 的元素,CSS 选择器格式
normalTransitionDuration number 200 非 hover 状态下的动效时长,单位 ms
hoverTransitionDuration number 50 hover 状态下的动效时长,单位 ms;值越大,甩动光标时发生的抖动越强烈
blurRadius number 10 非 hover 状态下的光标毛玻璃半径
glowRadius number 200 hover 状态下的光标发光点半径
style React.CSSProperties {} 光标的附加样式
zIndex number 10000 Z 轴层级

# IMouse#destroy()

销毁 IMouse 实例并恢复原始鼠标指针。