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

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

在任何时间点赶上缓动动画旋转

• 动画直线 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" 利用"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;

function spinRoulette(sel, deg, duration = 10000) {

  const $el = $(sel);

  const maxDuration = 10000;

  const deg_end = 720 + Math.round(deg);  // 2 revolutions + server-generated degrees

  const time = maxDuration - duration;    // Start time in ms

  const t = time / maxDuration;           // Start time to 0.0-1.0 range 

  $({t: t}).animate({t: 1}, {             // Custom jQuery anim. from 0.N to 1.0

    duration: duration,

    easing: "linear",                     // We need a linear 0.0 to 1.0

    step: function(t_now) {

      const e_now = easeInOutSine(t_now); // Current easing

      const deg_now = e_now * deg_end;    // Current degrees

      $el.css({transform: `rotate(${ deg_now }deg)`});

    }

  });

}

// Person 1 spins!

spinRoulette("#r1", 45);

// Person 2 joins the room after 2s

setTimeout(() => spinRoulette('#r2', 45, 10000 - 2000), 2000);

// Person 3 joins the room after 4.5s

setTimeout(() => spinRoulette('#r3', 45, 10000 - 4500), 4500);

// Person 4 joins the room after 8.7s

setTimeout(() => 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学位。