Javascript 为多个用户同步正在进行的动画-游戏开发

我目前正在开发一个财富之轮，它通过node.js和websockets同步到每个连接的设备。但是，我想当用户在轮子已经旋转的情况下加入时，切断动画的开始，这样它将只显示动画的最后几秒钟，而不改变动画的缓和

jquery动画由一个简单的步骤动画组成，该动画围绕轮子旋转。我已经尝试更改步骤的“fx”对象的参数，如fx.start或fx.pos。而fx.start仅是动画开始时的变量，例如180度和fx.pos只是一种输出参数，用于将某些内容更改为动画中的给定时间，如文本颜色或其他内容。但是，不能更改fx.pos值，也不能更改动画当前设置的位置。我创建了一个函数来旋转命运之轮两次，然后它以给定的角度停止

我还试图改变缓和，所以它将是50%线性，50%摆动，但这使动画看起来毫无意义，因为一开始它以恒定的速度旋转，突然它旋转得更快而不是更慢

功能旋转轮盘（度数，持续时间=10000）{
度=数学圆（度）；
$（“img.roulete”）。动画(
{现在：'+='+（720+deg-getRotation（））}{
持续时间：持续时间，
...
步骤：函数（现在，fx）{
如果（现在>=360）
现在-=360；
$（this.css（“变换”、“旋转”（+now+deg）”）；
}
});
}

如果持续时间小于10秒，动画的开始将被切断。因此，如果服务器在大约5秒前旋转轮子，我的动画的前5秒应该被切断。

在任何时间点捕捉到一个缓和的动画旋转

• 线性动画

  t

  从

  0

  到

  1

  ，或从

  0.N

  到

  1.0

  （如果玩家在最多10秒中的第6秒加入，则为0.6）

  $（{t:t}）。动画（{t:1}，

• 缓解！在任何给定的“现在”-时间点，使用自定义缓解功能将当前0.0-1.0时间范围（

  t\u now

  值）转换为相应的缓解

  e\u now

  值
• 用所需的末端度数乘以“e_now”结果

---

与其使用

“swing”

不如使用

“linear”

和让我们用自定义放松功能控制放松和计时（你可以找到许多放松片段）。假设我们喜欢

easeInOutSine

：

const easeInOutSine=t=>-（Math.cos（Math.PI*t）-1）/2；

例子 示例：4人，一人旋转轮子，另一人在初始旋转开始后的2、4.5和8.7秒加入表演：

const easeInOutSine=t=>-（Math.cos（Math.PI*t）-1）/2；
函数旋转轮盘（选择、度、持续时间=10000）{
常数$el=$（sel）；
常数maxDuration=10000；
const deg_end=720+数学圆（deg）；//2转+服务器生成的度数
const time=maxDuration-duration；//开始时间（毫秒）
const t=time/maxDuration；//从开始时间到0.0-1.0范围
$（{t:t}）.animate（{t:1}，{//Custom jQuery anim.从0.N到1.0
持续时间：持续时间，
放松：“线性”//我们需要线性0.0到1.0
步骤：功能（t_now）{
const e_now=easeInOutSine（t_now）；//电流缓和
const deg_now=e_now*deg_end；//当前度数
$el.css（{transform:`rotate（${deg_now}deg）`}）；
}
});
}
//人1旋转！
旋转轮盘赌（“r1”，45）；
//2号人在2秒后进入房间
setTimeout（（）=>spinRoulete（'r2'，4510000-2000），2000；
//第三个人在4.5秒后进入房间
setTimeout（（）=>旋转轮盘（'#r3'，45，10000-4500），4500）；
//第四个人在8.7秒后进入房间
setTimeout（（）=>spinRoulete（'#r4'，4510000-8700），8700）；

img{高度：120px；显示：内联块；}

欢迎来到StackOverflow。这到底是什么

720+deg-getRotation（）

？如果我没弄错你的问题，你想让每一个进入页面的玩家，在轮子旋转的任何时间点，以某种方式体验从点到点的自然旋转体验，对吗？轮子是否有初始的旋转加速度？轮子是否总是旋转N秒？（好像是10秒的常数）？轮子的末端状态对所有观众来说都应该是一样的吗（我认为这是很自然的）？轮子旋转720度（2次）+函数参数中给定的度数-它当前的旋转基本上是这样的。每个玩家都可以在任何时间点弹出页面，轮子会像页面上已经存在的任何其他用户一样旋转。轮子旋转时，jquery函数（element.animate（））中已经给出了“swing”，因此它会加速和减速。动画的长度为10秒，但如果播放器在轮子开始旋转后加入，动画应该会更短。轮子的最终状态对于每个用户来说都是相同的。非常感谢。我也有同样的想法，但不确定如何解决它