perfect-cursors

perfect-cursors

用于动画多玩家光标的完美插值。在 tldraw 中使用。 喜欢这家图书馆吗? 请考虑 成为赞助者。

安装

yarn add perfect-cursors
# or
npm i perfect-cursors

简介

您可以使用此库根据有限的信息平滑地制作基于 Cursor 的动画。 上图: 我们每 80 毫秒更新一次红色 Cursor 的位置。我们使用 perfect-cursors 库来正确地动画这些位置之间的变化。

在点之间进行动画

在实现多玩家应用程序时,您最有可能会根据从多玩家服务(如 Pusher、Liveblocks 中接收到的信息,显示每个用户的 Cursor 位置。在完美的世界中,这些更新将"实时"发生:即,在零延迟下到达,并且与用户显示器的速度相同。_上图:立即更新 Cursor。但是,在现实世界中,服务通常会将更新"限流"到大约每 50-80 毫秒一次。_上图:每 80 毫秒更新一次 Cursor 的位置。

通过 CSS 进行点之间的过渡可以实现,但随着延迟的增加,这种效果看起来越来越不自然。更糟糕的是,由于更新不在 精确 的时间间隔内出现,因此有些动画永远不会完成,而其他动画则会在动画之间暂停。

_上图: 使用样条插值,每 80 毫秒动画一次 Cursor 的位置。