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

Question

我目前正在研究命运之轮，它通过 node.js 和 websockets同步到每个连接的设备。但是我想切断动画的开始，当用户在滚轮已经旋转时加入，所以它只会显示动画的最后几秒而不改变它的缓动。

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

我也尝试改变缓动，所以它会是 50% 线性，50% 摆动，但这会让动画看起来很垃圾，因为一开始它以恒定速度旋转，突然它旋转得更快而不是更慢。

function spinRoulette(deg, duration = 10000) {

  deg = Math.round(deg);

  $("img.roulette").animate(

      { now: '+='+(720+deg-getRotation()) }, {

      duration: duration,

      ...

      step: function(now, fx) {

        if(now >= 360)

          now -= 360;

        $(this).css("transform", "rotate("+now+"deg)");

      }

    });

}

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

Answer 1

在任何时间点赶上缓动动画旋转动画直线&nbsp;t从0到1，或从0.N以1.0（0.6如果在第六第二出最大值10的加入了一个播放器）$({t: t}).animate({t: 1},舒适！在任何给定的“现在”时间点，使用自定义缓动函数将当前 0.0-1.0 时间范围（t_now值）转换为相应的缓动e_now值将缓动e_now结果乘以所需的结束度数而不是使用的"swing"&nbsp;利用"linear"和让我们控制了宽松和时间与自定义缓动功能（你可以找到许多宽松的片段在网上）。说我们喜欢easeInOutSine：const&nbsp;easeInOutSine&nbsp;=&nbsp;t&nbsp;=>&nbsp;-(Math.cos(Math.PI&nbsp;*&nbsp;t)&nbsp;-&nbsp;1)&nbsp;/&nbsp;2;例子示例 4 人，一个人在旋转轮子，其他人在初始旋转开始后2、4.5 和 8.7 秒加入表演：const easeInOutSine = t => -(Math.cos(Math.PI * t) - 1) / 2;function spinRoulette(sel, deg, duration = 10000) {&nbsp; const $el = $(sel);&nbsp; const maxDuration = 10000;&nbsp; const deg_end = 720 + Math.round(deg);&nbsp; // 2 revolutions + server-generated degrees&nbsp; const time = maxDuration - duration;&nbsp; &nbsp; // Start time in ms&nbsp; const t = time / maxDuration;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Start time to 0.0-1.0 range&nbsp;&nbsp; $({t: t}).animate({t: 1}, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Custom jQuery anim. from 0.N to 1.0&nbsp; &nbsp; duration: duration,&nbsp; &nbsp; easing: "linear",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// We need a linear 0.0 to 1.0&nbsp; &nbsp; step: function(t_now) {&nbsp; &nbsp; &nbsp; const e_now = easeInOutSine(t_now); // Current easing&nbsp; &nbsp; &nbsp; const deg_now = e_now * deg_end;&nbsp; &nbsp; // Current degrees&nbsp; &nbsp; &nbsp; $el.css({transform: `rotate(${ deg_now }deg)`});&nbsp; &nbsp; }&nbsp; });}// Person 1 spins!spinRoulette("#r1", 45);// Person 2 joins the room after 2ssetTimeout(() => spinRoulette('#r2', 45, 10000 - 2000), 2000);// Person 3 joins the room after 4.5ssetTimeout(() => spinRoulette('#r3', 45, 10000 - 4500), 4500);// Person 4 joins the room after 8.7ssetTimeout(() => spinRoulette('#r4', 45, 10000 - 8700), 8700);img {height: 120px; display: inline-block;}<img id="r1" src="https://i.stack.imgur.com/bScK3.png"><img id="r2" src="https://i.stack.imgur.com/bScK3.png"><img id="r3" src="https://i.stack.imgur.com/bScK3.png"><img id="r4" src="https://i.stack.imgur.com/bScK3.png"><script src="//code.jquery.com/jquery-3.4.1.min.js"></script>在上面的例子中，最后，你可以注意到（除了一些奇怪的视错觉）轮子在任何时间点以正确的旋转状态追赶，速度，并且所有的都以相同的缓动同时完成，在确切的预定义deg_end学位。