如何为多人光标制作动画

Multiplayer cursors are becoming an increasingly common sight across all sorts of collaborative tools, but have you ever wondered how they’re animated? Animating real-time cursors is more complex than it first may seem, thanks to network and connection limitations. Here’s a quick overview of a few different methods, with some React snippets to get you started. Let’s dive in!

多人光标在各种协作工具中变得越来越常见，但你有没有想过它们是如何被动画化的？由于网络和连接的限制，实时光标的动画化要比最初看起来更复杂。下面是对几种不同方法的快速概述，并有一些React片段供你参考。让我们开始吧!

Why do we need animations?

为什么我们需要动画？

In an ideal world, animations wouldn’t be needed, and every single cursor movement would be reflected immediately across browsers.

在一个理想的世界里，不需要动画，每一个光标的移动都会立即反映在浏览器上。

An interactive demo displaying a perfectly animated cursor.

一个互动的演示，显示一个完美的动画光标。

However, updates can’t be transmitted instantly, and realistically, we wouldn’t want them to be. Even if updates were sent every millisecond (1ms), blinking your eye still takes longer than 100ms—would it really be efficient to send 100 updates in such a short space of time?

然而，更新不可能是即时传送的，而且现实中我们也不希望如此。即使每毫秒（1ms）发送一次更新，眨眼的时间仍然超过100ms--在这么短的时间内发送100次更新真的有效吗？

Throttling

节流

Every real-time service will use some kind of throttling to ensure that your code, and their systems, aren’t overloaded, and this is where our animation problem lies. Try adjusting the throttle rate with the range slider below.

每个实时服务都会使用某种节流方式，以确保你的代码和他们的系统不会过载，这就是我们的动画问题所在。试着用下面的范围滑块来调整节流率。

An interactive demo allowing you to change the update frequency of cursors.

一个互动演示，允许你改变光标的更新频率。

Lowering the throttle rate prevents updates being sent as regularly, and as you can see, this results in the cursor animation only being completely smooth at the lowest rates.

降低节流率可以防止定期发送更新，正如你所看到的，这导致光标动画只有在最低速率下才会完全流畅。

In the real world

在现实世界中

Of course in the real world, the cursor won’t update exactly on the throttle rate (for example, 120ms) there'll be some slight variation between each update caused by varying processing times on clients and server, as well as changing network latency. The actual time ...