完美光标：实现多人协作中平滑光标动画的利器

2024-09-08 10:07:35作者：明树来

在多人协作应用中，光标的平滑移动是一个不容忽视的细节。无论是实时协作的白板工具，还是在线文档编辑器，光标的流畅性直接影响到用户体验。今天，我们要介绍的是一款专为解决这一问题而生的开源库——perfect-cursors。

项目介绍

perfect-cursors 是一个用于实现平滑光标动画的 JavaScript 库。它通过智能插值技术，能够在有限的信息更新频率下，实现近乎完美的光标移动效果。该库已经被广泛应用于 tldraw 等知名项目中，证明了其在实际应用中的高效性和可靠性。

项目技术分析

核心技术

perfect-cursors 的核心技术在于其智能插值算法。传统的光标动画通常依赖于 CSS 过渡或简单的 JavaScript 动画，但在多人协作场景中，由于网络延迟和服务器更新频率的限制，光标的位置更新往往不是实时的。这会导致光标在屏幕上“跳跃”，影响用户体验。

perfect-cursors 通过使用曲线插值（如“样条曲线”）来平滑光标的移动路径。即使在更新频率较低的情况下，也能模拟出近乎实时的光标移动效果。这种技术不仅提高了动画的流畅度，还减少了因更新频率不一致而导致的动画卡顿问题。

技术实现

perfect-cursors 的实现非常简洁高效。开发者只需创建一个 PerfectCursor 实例，并通过 addPoint 方法添加新的光标位置点。库会自动处理插值和动画的细节，确保光标在屏幕上的移动平滑自然。

import { PerfectCursor } from "perfect-cursors"

const elm = document.getElementById("cursor")

function updateMyCursor(point: number[]) {
  elm.style.setProperty("transform", `translate(${point[0]}px, ${point[1]}px)`)
}

const pc = new PerfectCursor(updateMyCursor)

pc.addPoint([0, 0])
setTimeout(() => pc.addPoint([100, 100]), 80)
setTimeout(() => pc.addPoint([200, 150]), 160)

此外，perfect-cursors 还提供了 React 钩子，方便在 React 项目中使用。

import { usePerfectCursor } from "../hooks/usePerfectCursors"

export function Cursor({ point }: { point: number[] }) {
  const rCursor = React.useRef<SVGSVGElement>(null)

  const animateCursor = React.useCallback((point: number[]) => {
    const elm = rCursor.current
    if (!elm) return
    elm.style.setProperty(
      "transform",
      `translate(${point[0]}px, ${point[1]}px)`
    )
  }, [])

  const onPointMove = usePerfectCursor(animateCursor)

  React.useLayoutEffect(() => onPointMove(point), [onPointMove, point])

  return (
    <svg
      ref={rCursor}
      style={{
        position: "absolute",
        top: -15,
        left: -15,
        width: 35,
        height: 35,
      }}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 35 35"
      fill="none"
      fillRule="evenodd"
    >
      {/* SVG 内容 */}
    </svg>
  )
}